实现垂直居中的几种方式

https://blog.csdn.net/btshjhewei/article/details/51884725

方式一：单行文本垂直居中
其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height设置为同样的数值。
当然也有道友说其实这个地方设置height值其实完全没有必要，容器会根据line-height自动撑开。这个理论实际上是正确的，他的正确的前提在于该元素内只有文本节点。
但是如果父级元素不设置高度，子元素设置了高度，这个时候就不能垂直居中了，因为父级元素的高度和子元素的高度+margin值 一样了。因此为了保险建议还是设置height和line-height相同，来实现单行文本的居中。
 

方式二：利用vertical-align垂直居中
很多人说vertical-align不好用，使用了这个样式，达不到居中的效果。其实写这个文章之前我也是这么认为的，但是看了vertical-align的说明后，才发现是自己用错了。在w3c上面，vertical-align是这样解释的：
“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”
根据这个话，做垂直居中其实可以这样玩：

（1）、设置父级元素为table-cell

通过设置父级元素为display:table-cell以及vertical-align:middle，这样就可以使子元素垂直居中了。这里呢和table里面的垂直居中类似。
注意：设置为display:table-cell的元素，千万不能使用浮动或者定位，否则会丧失table-cell元素的垂直居中的功能。因为浮动和定位是块级元素专有的。如果实在要使用浮动或者定位，可以再外面套一层div，在这个div上面使用浮动或者定位。
 

（2）、如果子元素是图片
vertical-align:middle的解释是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。由于字符X在em框中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。当font-size为0时，相当于把字符X的字体大小设置为0，于是可以实现完全的垂直居中。
 

(3)、通过新增元素来实现垂直居中
可以将新增的元素高度设置的和父级元素一样高，宽度为0，并且同样设置vertical-middle:middle以及display:inline-block;
   由于两个元素之间的空白会被解析，因此需要在父级设置font-size:0px;在子级又将font-size设置回来。
 

如果对文档结构要求比较严格，其实我们也可以利用:after来实现。