CSS讓元素居中佈局

水平居中

HTML：

<div class="wrapper">
    <div class="item"></div>
</div>

CSS：

div.wrapper { height: 500px; width: 1000px; border: 1px solid #000; }
div.item { margin: 0 auto; height: 200px; width: 200px; background-color: gray; }

元素高度和高度已知，水平和垂直都居中

HTML：

<div class="wrapper">
    <div class="item"></div>
</div>

CSS：

div.wrapper { height: 500px; width: 1000px; border: 1px solid #000; }
div.item { position: relative; top: 50%; left: 50%; height: 200px; width: 200px; margin-left: -100px; margin-top: -100px; background-color: gray; }

居中原理：

先利用定位使得元素的左上角在父元素的中間（水平和垂直），top、left設置爲50%是根據父元素計算，注意，當是絕對定位時，是根據最近position設置爲relative或者absolute的元素計算。

因此，設置成絕對定位須要在父元素加上：position: relative; 否則這裏會根據最近的（body）計算

div.wrapper { position: relative; height: 500px; width: 1000px; border: 1px solid #000; }

元素高度和高度未知，水平和垂直都居中

HTML：

<div class="wrapper">
    <div class="item"></div>
</div>

CSS：

div.wrapper { height: 500px; width: 1000px; border: 1px solid #000; }
div.item { position: relative; top: 50%; left: 50%; height: 200px; width: 200px; transform: translate(-50%, -50%); background-color: gray; }

居中原理：

這裏利用了CSS3的移動——transform: translate

先利用定位使得元素的左上角在父元素的中間（水平和垂直），而後使用css3的偏移使元素向上、向左移動50%（這裏的50%是根據本身的寬度和高度），和margin不一樣，margin若是爲百分比是根據父元素計算。

仍然，設置成絕對定位仍然須要在父元素加上：position: relative;

由於須要用到css3的知識，因此兼容性爲：

IE9+ 、Chrome4.0+、FF3.5+、Safari3.1+、Opera10.5+

不肯定數目子元素居中

標題可能很差理解，直接上想要效果圖：

圖中是個居中的分頁器，因爲頁數可能改變，明顯寬度不肯定，若是用CSS3的偏移能夠解決，可是有兼容性問題，這裏就不介紹，參考上面的方法。

下面介紹另外一種辦法：

HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS：

ul { position: relative; float: left; left: 50%; }
li { float: left; position: relative; left: -50%; width: 30px; height: 30px; line-height: 30px; margin-left: 5px; list-style: none; text-align: center; background-color: gray; color: #fff; }

如上圖，首先ul和li都是float：left，這時，ul的實際寬度是根據li的個數改變而改變的。

而後給ul設置爲相對定位，而且left設置爲50%。效果如圖的藍色部分，ul的左邊在父元素的中間（50%）

這時li也設置爲相對定位，left設置爲-50%，這時是根據父元素，也就是ul來計算，全部的li都偏移ul寬度的一半，這樣就居中了！