绝对定位居中 Absolute Centering
<div class="Container">
<div class="Absolute-Center">
</div>
</div>
.Container {
position: relative;
}
.Absolute-Center {
position: absolute;
width: 50%;
height: 50%;
overflow: auto; //防止内容越界溢出
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
优点:
兼容性好 Support IE8+
支持百分比宽高
缺点:
必须声明高度
不适用Windows Phone
负边距 Negative Margins
.is-Negative {
position: absolute;
width: 100px;
height: 200px;
padding: 10px;
top: 50%; left: 50%;
margin-left: -60px; //(width + padding)/2
margin-top: -110px; //(height + padding)/2
}
优点:
兼容性好 Support All Browser
缺点:
定宽高且不支持百分比
表格单元 Table Cell
<div class="Container ">
<div class="Table-Cell">
<div class="Child">
</div>
</div>
</div>
.Container {
display: table;
}
.Table-Cell {
display: table-cell;
vertical-align: middle;
}
.Child {
width: 50%;
margin: 0 auto;
}
优点:
兼容性好 Support IE8+
不定宽高
缺点:
html层级多
移动 Transform:Translate
.Transform-Translate {
position: absolute;
width: 50%;
margin: auto;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
}
优点:
不定宽高
缺点:
浏览器兼容性(适合移动端)
厂商前缀
可能与其他transform属性冲突