标签：百分比 pos 支持 col ie9 水平 ems display back
方法1:绝对定位 + margin-top (已知子元素宽高)
如果盒子是绝对定位的，此时已经脱标了，margin:auto无效。如果还想让其居中（位于父亲的正中间），可以这样做
<div class="box"> <div class="content"> </div> </div> .box { background-color: #FF8C00; width: 300px; height: 300px; position: relative; } .content { background-color: #F00; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }
方法2:position + transform (子元素宽高未知)
和上面的原理相同,但是不需要知道子元素宽高,IE9以下不支持transform属性
<div class="box"> <div class="content"> </div> </div> .box { background-color: #FF8C00; width: 300px; height: 300px; position: relative; } .content { background-color: #F00; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
方法3:table-cell布局
父元素display设置父元素为：table，子元素为：cell-table，vertical-align: center,
父元素（parent）可以动态的改变高度（table元素的特性）
<div class="box"> <div class="content"> <div class="inner"> </div> </div> </div> .box { background-color: #FF8C00;//橘黄色 width: 300px; height: 300px; display: table; } .content { background-color: #F00;//红色 display: table-cell; vertical-align: middle;//使子元素垂直居中 text-align: center;//使子元素水平居中 } .inner { background-color: #000;//黑色 display: inline-block; width: 20%; height: 20%; }
方法4:flex布局 (简单便捷)
<div class="box"> <div class="content"> </div> </div> .box { background-color: #FF8C00; width: 300px; height: 300px; display: flex; justify-content: center; //子元素水平居中 align-items: center; //子元素垂直居中 } .content { background-color: #F00; width: 100px; height: 100px; }
方法5:绝对定位法
父元素使用定位（相对/绝对都行），子元素设置position:absolute; top: 0; left: 0; bottom: 0; right: 0; margin:auto; 子元素还是要指定宽高，可以用百分比
<div class="box"> <div class="content"> </div> </div> .box { background-color: #FF8C00; width: 300px; height: 300px; position: relative; } .content { background-color: #F00; width: 100px; height: 100px; position:absolute; top:0; left:0; right:0; bottom:0; margin: auto; }
标签：百分比 pos 支持 col ie9 水平 ems display back
原文地址：https://www.cnblogs.com/Vanish-F/p/11698333.html
