CSS 垂直居中的秘密

css水平居中很简单，只需一行字，使用text-align: center; 或者 margin: auto; 就可以使文字或者图片居中，而要是让文字或者图片垂直居中，说实话在CSS中还没有一条语句就能解决垂直居中的问题。而这个是个普遍的需求，基本上设计师在设计的时候都会设计垂直居中的样式。下面总结了几种实现方式。

一、基于绝对定位的解决方案

html

<div class="inner-1" style="height: 100px; text-align: center;">
    <div class="inner-1-text">第一条文本</div>
</div>

css

.inner-1 {
  position: relative;
  width: 200px;
  height: 200px;
  background: white;
  overflow: hidden;
}

.inner-1-text {
  position: absolute;
  left: 50%;
  top: 50%;
 -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%);
}

• 这种方法采用了绝对定位，.inner-1-text 中将元素的位置首先定位在距父元素上方一半的距离，距左边一半的距离，但是这时还没有居中，然后使用translate()变形函数，在translate()变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的，向左边和上边移动自身宽度和高度的一半，正好将元素居中。

• 但有时我们不能选用绝对定位，因为它对整个布局影响太过强烈，而如果居中的元素的高度超过了视口，那它的超出的部分就会被裁掉。

二、基于Flexbox的解决方案

html

<div class="inner-2" >
    <h4>第二条文本垂直居中，哈哈哈哈hhhhhhhhhhh啦啦啦啦</h4>
 </div>

css

.inner-2 {
 height: 200px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

• 对比了一下，觉得还是这种方式最简单效果最佳，只需要两三行就可以解决垂直居中的问题。首先给居中元素的父元素设置display:flex; 设置align-items: center; justify-content: center;可以让它的内部文本居中。

三、使用table

还有一种方法就是直接使用table布局
html

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

如果担心语义上的不同，可以使用这种写法

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

CSS

.something-semantic {
  display: table;
  width: 100%;
}
.something-else-semantic {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

• CSS table或许适用你现在的需求或者不适用，Tables渲染出来的样式会区别常规的块状元素，例如宽度会100%拉伸到父元素的宽度自适应。如果你需要包含其他样式，使用div可以声明table可以得到解决。

参考链接

codepen Demo

不知道的居中秘籍