关于css的水平，垂直居中

在css的世界里，若是咱们想让一个块级元素水平居中，想必你们都知道利用margin:0 auto;嘛，这样就可让块级元素在它的父元素中水平居中了。

列如这样：

 

View Code

运行效果图以下，绿色方块水平居中于它的父元素

咦，那么问题来了，咱们想要绿色方块垂直居中或者水平垂直居中呢？

是否是只要设置margin:auto 0;或margin:auto;就能够了呢？

曾经我也是这么觉得的，由于设置margin:0 auto;能够水平居中嘛。

可是垂直居中就不是这么回事啦。

在普通文档流中，假若你设置margin:auto，其实浏览器解析时，会理解为margin:0 auto;

（将margin-top和margin-bottom设置为0，而margin-left和margin-right设置为左右自适应）。

摘自W3.org

若是你心存顾虑，能够将上面demo中的margin:0 auto;换成margin:auto;，运行后的结果是同样的。

咦，那若是咱们如今想让块级元素垂直居中呢，如何处理？

 方法一：

将元素设置为绝对定位absolute，这样就可让元素脱离普通文档流，且absolute有一特性：会将元素的display设置为block。

而后，再设置绝对定位的坐标(left,top,right,bottom)为0，这样会使浏览器为绝对定位包裹一层新的盒子模型。

再结合margin，就能够你想水平居中(margin:0 auto;)就居中，垂直居中(margin:auto 0;)就居中了，水平垂直居中(margin:auto;)也完美。

下面列举的demo为‘水平垂直居中’：

 

View Code

PS：position:fixed也能够脱离文档流，so它和absolute是同样儿滴，区别就是fixed是相对于浏览器窗口进行定位的。

方法二：

方法一是经过改变元素的文档流，那么除开改变它的文档流呢？

那咱们就另辟蹊径，计算元素的宽高嘛。

么子意思？

以‘垂直居中’举例，假若咱们有个子元素child，须要垂直居中于它的父元素parent。以下：

        

那么首先咱们得将子元素child以父元素的顶点(top,left=0  如上图所示)，往下和右移动父元素宽高的50%；以下图所示：

  

再将子元素Child以parent中心点，往上和左移动自身元素宽高的50%，就垂直居中啦，以下图所示：

     

好了，这个流程咱们是理清楚了，那用CSS应该怎么实现呢？

列举2个:

（1）、 margin + absolute

设置child为absolute，将其top、right皆为50%，那么就使得子元素层显上图图二的状况；

再将元素的margin-top，margin-right设置为-50%，那么就能够实现垂直居中啦。

示例代码以下：

 

View Code

（2）、 translate + absolute

设置child为absolute，将其top、right皆为50%，那么就使得子元素层显上图图二的状况；

再经过translate将元素移动50%,50%，也能够获得图三，实现垂直居中。

示例代码以下：

 

View Code

方法三：

利用table-cell属性就能够轻松实现。

将父元素变为table-cell，从而可使用table的属性vertical-align:middle，使元素垂直居中，再将子元素margin:0 atuo;就能够实现水平居中咯。

PS：table-cell必须包含在display:table元素中，table-cell是属于table滴嘛。

示例代码以下：

 

View Code

好了，css之垂直水平居中就算完了(弹性布局Flex不在本篇讨论范畴)。