【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

。