居中是我們在css中經常遇到的問題，一般有水平居中、垂直居中、垂直水平居中這3種情況，那麼今天首先就來對學習到的水平居中的方法做個總結筆記。 css水平居中 text-align:center 為了看得更清楚，我們舉一個例子，如圖，我們將div2放入div1中，現在，如果我們想讓文字在div2中水平 ...
居中是我們在css中經常遇到的問題，一般有水平居中、垂直居中、垂直水平居中這3種情況，那麼今天首先就來對學習到的水平居中的方法做個總結筆記。
- css水平居中
- text-align:center
它的效果為： 將父元素設置了text-align：center之後，子元素中的文本會表現為水平居中；
為了看得更清楚，我們舉一個例子，如圖，我們將div2放入div1中，現在，如果我們想讓文字在div2中水平居中，那麼將它的父元素div2或者（div1）設置為text-align:center即可。因為子元素會繼承text-align這個屬性。
那麼接下來，如果我們想讓div2也相對於div1水平居中，應該怎麼辦呢？既然居中效果只對文本內容和行內元素有效，那我們將div2設置為display：inline-block；我們再來看看效果：
我們看到div2與裡面的文字都水平居中了，但是我們發現這一段文字水平居中之後很難看，我們只想讓div2水平居中，這也就是這種方法的不足之處，子元素的text-align繼承了父元素的center，文字也居中顯示，所以我們需要在子元素中設置text-align：left；
這樣就變正常啦~
2. margin：0 auto；
margin: 0 auto；在本身元素上設置，可以實現塊級元素水平居中。上面的例子中我們可以看到div1並沒有相對頁面水平居中，它是塊級元素，所以我們只要把div1，div2都設置margin：0 auto；就會出現如下效果：
3. 利用絕對定位元素實現
（1）子絕父相水平居中：因為絕對定位元素具有伸縮性，所以如果我們將絕對定位元素的width設置為auto時，同時把left與right設置為0，那麼元素就會將其相對的父元素水平填充滿。這時如果我們把寬度設置為固定值，margin為auto的前提下，只要 left 和 right 的值相等（或都為0），且不超過其相對元素減去該絕對定位元素 width 的一半，就可以實現水平居中了。
（2）利用margin負值：將div設置為絕對定位，父元素為相對定位，然後將div的left和top屬性值分別設置為50%，但是這個時候只會讓div的左上角居中，然後在將margin-left和margin-top屬性值分別設置為負數，並且值為div的寬和高的一半，這樣就是先了div的中心點居中，但如果它沒有父元素，或者父元素中沒有採用絕對定位或者相對定位的，那麼就以視窗為定位參考對象，也就是整個div相對視窗居中了。
效果看下麵兩張圖，圖一中div1設置了相對定位，div2為絕對定位，所以div2在div1中水平居中。
圖二中div1設置了無定位，div2為絕對定位，所以div2相對於視窗居中。
