【css】垂直置中的幾種寫法

標籤：splay   vertica   hack   com   ext   margin   同步   cal   博文   

結構

<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 上。

【css】垂直置中的幾種寫法