<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相关样式处理怎么解决关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/csstutorial/110071.html