首页 > 代码库 > 【css】垂直居中的几种写法
【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 上。
【css】垂直居中的几种写法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。