结构
<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
。