【css】垂直居中的几种写法

结构

<div class="vam">
    <div class="vam-body">垂直居中</div>
</div>
<div class="vam2">
    <span class="vam2-hack"></span>
    <div class="vam-body">垂直居中</div>
</div>

样式

.vam,
.vam2 {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #f00;
    font-size: 0;
    text-align: center;
}

.vam:after,
.vam2-hack {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.vam:after {
    content: ‘‘;
}

.vam-body {
    display: inline-block;
    font-size: 16px;
    vertical-align: middle;
}

说明

第二个方法兼容 ie6 和 ie7，因为不支持 :after。

后续博文都会同步到博主的 github 上。