css實現元素垂直水平居中-包括未知寬高的元素

這個一道很經典的面試題，做專案中也常會出現這樣的需求。 現在我就用幾種比較常用的方法。相容性也列出來。

第一種已知寬高（定位加負邊距解決）相容到IE6

position: absolute;
z-index: 8;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background: red;
複製程式碼

demo地址 JSBin

第二種未知寬高 (定位加margin解決) 相容到IE8 移動端推薦使用

position: absolute;
z-index: 8;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
margin: auto;
background: red;
複製程式碼

如果改變寬度和高度還是垂直水平居中的。 demo地址 JSBin

第三種未知寬高 (定位加transform解決) 相容到IE9 移動端推薦使用

position: absolute;
z-index: 8;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
background: red;
複製程式碼

如果改變寬度和高度還是垂直水平居中的。 demo地址 JSBin

第四種未知寬高 (彈性盒子模型解決) 相容到IE10

display: flex;
display: -webkit-flex;
align-items:center;
justify-content: center;
複製程式碼

如果改變寬度和高度還是垂直水平居中的。 demo地址 JSBin

第五種未知寬高 (table特性解決的) 相容到IE6 PC端推薦使用

#box{
    width: 100px;
	height:100px;
	text-align:center;
	font-size:0;
    background: red
}
#box:after,#box span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:0;
	height:100%;
	vertical-align:middle;
}
#box:after{
	content:'';
}
#box p{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	font-size:16px;
}
複製程式碼

demo地址 JSBin

我的部落格和GitHub地址喜歡的話送個star謝謝。

github.com/lanpangzhi

blog.langpz.com

參考

demo.doyoe.com/css/alignme…