轉(zhuǎn)載自 http://www.cnblogs.com/dan-dan/p/4771614.html
一穷遂、負(fù)margin法
-
這是比較常用的方法，在知道元素的寬高的前提下才能使用
<div id="a"></div> #a{ height:300px; width:300px; position:absolute; top:50%; left:50%; margin-left:-150px; margin-top:-150px; } 負(fù)margin是個(gè)非常有意思的用法鲁豪，深入了解后會(huì)發(fā)現(xiàn)他在布局上相當(dāng)有用
優(yōu)點(diǎn)：代碼量少，兼容性好。
缺點(diǎn)：非響應(yīng)式方法洗显，內(nèi)容可能會(huì)超出容器。
二原环、transform法
<div id="a"></div>
#a{
width: 50%;
height: 20%;
background: green;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%, -50%);
-webkit-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
}
- 優(yōu)點(diǎn)：代碼量少挠唆；寬高可變，相應(yīng)式布局
- 缺點(diǎn)：不支持IE8嘱吗，可能需要帶供應(yīng)商前綴
三玄组、Flexbox法
<div class="vertical-container">
<div class="a"></div>
</div>
.vertical-container {
height: 300px;
width: 300px;
background: #ccc;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.a{
width: 200px;
height: 200px;
background: green;
}
- Flexbox的用法遠(yuǎn)不止如此，在布局上還有很多有趣的用法谒麦。
四俄讹、“完全水平垂直居中”：
-
必須要設(shè)置元素的高度，圖片自身有高度的可以不設(shè)绕德。
<div id="a"></div> #a{ width: 200px; height: 200px; background: red; margin:auto; position: absolute; top:0;left:0;right: 0;bottom: 0; }
