CSS中实现水平/垂直居中
2017-11-12 18:18
246 查看
CSS中实现水平/垂直居中
在CSS中实现水平居中相对简单,但是却没有一个明确的属性表示这是实现垂直居中的,这就导致垂直居中的实现相对初学者来说难上许多。但是在实际的开发中垂直居中的需求常常出现,例如一行中有左右两部分,左边是图片,右边是文字,这时需要左右两部分按照垂直居中对齐(新闻列表的样式)等等。注:
<style> html, body{ height: 100%; } .wap{ height: 100%; } </style>
以上代码只是为了让wap可以占据整平的高度,让居中效果看的更加清晰,对于居中的实现并没有关系。
为什么wap占据整屏幕需要
html,body{ height: 100%}然后在设置
.wap{height: 100%}呢?而宽度要占据整屏幕
.wap{ width: 100% },如果是block元素不设置也可以占满。
因为height和width的百分比值计算方式不一样,如果父元素的
height: auto子元素的height百分比值是不起作用的,但是相反,width的百分比值在
width: auto的父元素下却可以正确计算。
而添加的元素都是在html和body的子元素,但是默认html和body的height是auto,并没有明确设置高度,那么子元素设置高度值为百分比自然是不起作用了。
水平居中对齐
方法一:使用 margin: 0 auto
该方法水平居中一个宽度固定的元素,使用了margin: 0 auto;的方法,该方法并不能居中一个宽度没有明确设置的元素(依靠自身子元素撑起宽度),方法如下:
<style> .inner{ width: 100px; height: 20px; background: #ccc; margin: 0 auto; } </style> <div class="wap"> <p class="inner"></p> </div>
方法二:使用绝对定位加上margin-left负值
同样适用于宽度固定的元素,如果宽度不固定就不能得知margin-left的值究竟是多少,也就无法居中。方法如下<style> .wap2{ position: relative; height: 20px; } .inner2{ position: absolute; left: 50%; margin-left: -50px; /* 注意这里,整个元素的左边界在父元素的50%处, 然后向左缩进自身的一半,这样自身的中心就在父元素的50%处了。 */ width: 100px; height: 20px; background: #ccc; } </style> <div class="wap2"> </div>
方法三:绝对定位
一样只是适用于宽度固定的元素,如果被居中元素没有明确设置宽度,那么该元素就会占满position: relative;的父元素(占满也可以说是居中了),注意
margin: auto;没有该属性即使宽度固定也不会成功居中。
<style> .wap3{ position: relative; background: #333; } .inner3{ position: absolute; left: 0; right: 0; width: 20px; margin: auto; /* 以上为重要代码,要加上margin: auto; 这个不可或缺 */ height: 20px; background: #ccc; } </style> <div class="wap3"> <div class="inner3"> </div> </div>
方法四:居中行内元素
该方法不仅仅适用于宽度固定的元素,也可以用作自身宽度不固定的元素,其实就是水平居中了一个行内元素,像居中文本一样,所以即使宽度不固定也没关系。<style> .wap3{ text-align: center; } .inner3{ display: inline-block; /*如果html元素是block, 因为text-align只能作用域行内/行内块元素*/ height: 30px; background: #ccc; } <style> <div class="wap3"> <div class="inner3"> 我是水平居中的 </div> </div>
垂直居中对齐
方法一:使用绝对定位加上负的margin值
原理同水平居中的方法二,让自身定位到高度的一半处,然后再像反方向移动自身高度的一半,所以需要居中的元素的高度要是已知的。注:父元素高度可以未知,top 的百分比值可以计算出来自己的位置和子元素宽度百分比值一样。
<style> html, body{ height: 100%; } .wap{ position: relative; height: 100%; background: #333; } .inner{ position: absolute; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: #ccc; } </style> <div class="wap"> <div inner></div> </div>
方法二:使用单元格垂直居中内容的特性
让元素模拟表格的单元格行为,单元格会自动垂直居中子元素无论子元素的display属性值是什么。注:
display: table-cell;需要和
vertical-align: middle;同用
<style> html, body{ height: 100%; } .wap3{ display: table-cell; vertical-align: middle; /*以上两句是关键*/ width: 100px; height: 100%; background: #333; } .inner3{ background: #ccc; } </style> <div class="wap3"> <div class="inner3"> 我是垂直居中的 </div> </div>
方法三:使用绝对定位四个方位值为0,加上margin: auto 就会居中的特性
同水平居中的方法三<style> html, body{ height: 100%; } .wap3{ height: 100%; background: #333; } .inner3{ position: absloute; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; background: #ccc; } </style> <div class="wap3"> <div class="inner3"> 我是垂直居中的 </div> </div>
方法四:基于行内元素的对齐方式
该方法较为复杂,但是灵活度却是最好,该方法对于wap和inner的高度没有要求。该方法用到的机制简单来说就是行内元素的对齐,正常情况下行内元素是按照基线对齐的,而vertical-align改变了行内元素的对齐方式为中线对齐,但是中线在正常情况下并不是元素的中心,虽然差别很小,所以使用了
font-size: 0;。
wap的行内子元素并且设置
vertical-align: middel;都要和::after伪元素居中对齐。同时该伪元素的高度又和wap的高度相同,那么改为元素高度的中心就是wap高度的中心,和伪元素居中对齐就在wap的中心了。
原理较为复杂详见张鑫旭老师的博文。
<style> html, body{ height: 100%; } .wap3{ font-size: 0; background: #ccc; height: 100%; } .wap3::after{ content: ""; height: 100%; font-size: 0; vertical-align: middle; display: inline-block; } .inner3{ font-size: 12px; display: inline-block; vertical-align: middle; } </style> <div class="wap3"> <div class="inner3"> 我要垂直居中 </div> </div>
方法五:使用flex布局
使用flex布局,这种方式实现起来比较简单。想要深入学习flex布局转阮一峰老师这篇博文<style> html, body{ height: 100%; } .wap4{ display: flex; align-items: center; height: 100%; } .inner4{ } </style> <div class="wap4"> <div class="inner4"> 我是垂直居中的 </div> </div>
9dd9
相关文章推荐
- CSS实现图片水平垂直居中于DIV
- CSS实现水平垂直居中的1010种方式
- css实现div垂直水平居中
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- css实现div内图片的垂直、水平居中
- 3行Css实现div水平、垂直居中
- css实现多行文本垂直水平居中
- 使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法?
- css实现div的水平垂直居中方法
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS实现垂直水平居中
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS实现水平垂直同时居中的5种方法
- css实现图片水平垂直居中
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术(转)
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- css实现水平、垂直居中的几种方法