css之垂直居中

使用vertical-align:middle这个属性即可实现效果。但会发现，很多时候，使用这个属性的时候，根本不起作用，这是由于vertical-algin只针对inline-block方式显示的元素才会生效。当然，还有一个关键因素，其还要有兄弟节点，必须也要是inline-block方式显示的。

知道了这些前提，就可以使用如下的这种方式来实现效果。

有如下结构，想实现p中的内容垂直居中。

<div class="vm">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

css的写法

.vm:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}
.vm p {
    display: inline-block;
    vertical-align: middle;
}

使用上述方式，可以轻松实现垂直居中效果。

不过，现在css3的flex布局，使用align-items: center一句话就能够轻松实现居中效果。