CSS - 利用 vertical-align:middle 垂直居中元素容器

前言

以前总是以为 vertical-align 与 text-align 是同样的道理，一个是垂直居中，一个是水平居中。

vertical - align

vertical-align 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值。

这会使元素降低而不是升高，在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

【第一种用法】： 先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的 td 加一个 vertical-align:middle 的样式，表格里面的内容会垂直居中，同样的如果给一个 vertical-align:bottom 就会底部对齐，如果给一个 vertical-align:top 就会顶部对齐。

【第二种用法】： 该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素 a 和 b ，a 和 b 都是 div，当 a 加了一个 vertical-align:middle 样式之后， b 的底部（基线）就会对齐 a 的中间位置，如下图：

如果 a 和 b 都加了一个 vertical-align:middle 样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：

现在我要让 class=“box” 的 div 在 class=“wrapper” 的 div 里面垂直居中，我可以在 class=“wrapper” 的 div 里面加一个 div 空标签，把它的高度设为 100%，宽度设置为 0，再给它一个 vertical-align:middle 样式，同样的给 class=“box” 的 div 一个 vertical-align:middle 样式，那么 box 就可以在 div 里面垂直居中了。

<div class="wrapper">
    <div class="box"></div>
    <div class="help"></div>
</div>

.wrapper{
   width: 500px;
   height: 500px;
   background-color: pink;
   text-align: center;
}

.box{
   width: 100px;
   height: 100px;
   background-color: deepskyblue;
   display: inline-block;
   vertical-align: middle;
   margin: 0 auto;
}

.help{
   width: 0;
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

效果：