首页 > 代码库 > CSS垂直居中布局方法
CSS垂直居中布局方法
整理一下个人认为比较好的CSS垂直居中的布局方法。
1. 绝对定位+负值margin。
//长宽的设置只是为了说明,实际使用没有限制 <div id="container-outer"> <div id="container-inner"></div> </div>
//CSS #container-outer { width: 200rem; height: 100rem; position: relative; } #container-inner { width: 100rem; height: 50rem; position: absolute; top: 50%; left: 50%; margin-top: -25rem; margin-left: -50rem; }
2. 高度为100%的inline-block的Before伪类为基准使之后的inline-block元素都可以以这个伪类vertical-align: middle对齐。
//长宽的设置只是为了说明,实际使用没有限制 <div id="container-outer"> <img id="container-inner"> </div>
//CSS #container { width: 200rem; height: 100rem; } #container:before { content: ‘‘; display: inline-block; vertical-align: middle; height: 100%; } #container-inner { width: 100rem; height: 50rem; display: inline vertical-align: middle; }
暂时记录这两个方法,当然还有位移的方法和方法1差不多。
之后有更好的方法再补充。
CSS垂直居中布局方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。