<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>容器任意分辨率下水平居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,
body{
width:100%;
height:100%;
text-align:center;
}
.wrapper{
width:800px;
height:100%;
margin:0 auto;
background:#CCC;
text-align:left;
}
</style>
</head>
<body>
<div class="wrapper">test</div>
</body>
</html>
事實上margin:0 auto就可以讓所有瀏覽器水平居中,但是關鍵在於文檔開始要有DOCTYPE聲明,也就是在瀏覽器標準渲染模式下纔可以
如果刪除頂部的<!DOCTYPE html>就觸發了混亂模式,那麼IE下會居左,所以我給body加上text-align:center,因爲IE下瀏覽器會誤認爲讓所有內容都居中而不僅僅是文字
因爲這會影響到容器內文字居中,所以還得在容器加上text-align:left居左,這樣就可以讓任何瀏覽器任何分辨率下都可以水平居中,測試通過FF Chrome IE6 IE8 Safari Opera