They way to the font-end: 垂直居中的几种表现形式

垂直居中在我们网页开发中见到的很多，今天我们就来简单的介绍几种垂直居中的方式：我们都知道居中其实很好控制，例如：text-align: center可以实现居中。但是对于垂直来说，所以需要分别来针对不同模型进行做出改变。

padding上下相等实现垂直居中代码实现：http://js.jirengu.com/tiwakizowi/2/edit 这种居中实现，text-align控制了行内元素的水平居中，padding:40px 0; 实现了垂直方向的居中，上下的内边距是一样的。优点：内容自适应的，无论你往里面怎么样动态的添加内容，其格式还是垂直居中的。缺点：如果想实现某种弹窗效果，在屏幕的中央这种方法就很那实现了。这时候我们需要引入第二种，绝对定位实现垂直居中。
position绝对定位实现垂直居中代码实现：http://js.jirengu.com/yeverubeqa/2/edit 通过代码的展示，我们可以得到可以通过position: absolute;绝对定位的方式让其展示在屏幕的垂直居中。但是这里的top:50%;或者具体的某个元素的值的大小是父容器元素的百分之50，所以要添加margin-top: -1/2 hegiht; margin-left: -1/2 widht; 当然也可以通过transform: translate(-50%,-50%);代替margin-top,margin-left但是使用之前要考虑好兼容性的问题。好处：适合实现复杂的内容弹窗。
vertical-align实现垂直居中代码实现：http://js.jirengu.com/pafixasuco/5/edit
```
.middle{
text-align: center;
}
.middle::before{
content: ' ';
display: inline-block;
height: 100%;
vertical-middle: middle;
}
```
这里我们可以看到：第一，使用text-align: center;实现水平居中。第二，加入伪元素，设置元素的高度为100%。第三，我们都知道vertical-align都是针对于行内元素或者表格元素，这里需要改变display的实现。第四：vertical-middle:middle 实现水平居中。
table-cell实现垂直居中 table-cell的垂直居中与vertical-align相类似，代码实现：http://js.jirengu.com/waxesamexi/1/edit 具体实现如下：
```
.box {
width: 300px;
height: 200px;
border: 1px solid #ccc;
display: table-cell;
vertical-align: center;
text-align: center;
}
```
但是这里需要注意的是使用了display: table-cell;就改变了box的展现方式，对于以后的重构可能会埋下bug。关于更多的垂直居中的方式，未完待续...

JackWong992 / article

They way to the font-end: 垂直居中的几种表现形式 #14