元素水平居中和垂直居中的幾種簡單方法

1、如何使元素在水平方向上居中

1. 使用text-align:center。

    在父級元素的CSS樣式設置text-align:center。把內部嵌套一個div把它看成文原本對待，不過這個方法有時候是無論用的。

2.在須要居中的元素設置margin：0 auto。

    這句CSS的意思爲：設置margin-left和margin-right爲自動適應父級元素寬度。因此能夠使元素水平居中，不過記得設置其width。

2、如何使元素在垂直方向上居中

1.使圖片在垂直方向上居中。

    div{backgroud-position:0 50%} 。固然，這隻適用於背景圖！

2.使只含文本的元素居中。

    在css裏設置它的行高：line-height：xx px。 xx爲其自己height值。

3.使包含文本和其餘元素都同時居中。

    僅僅設置行高是不夠的，應該再加上display:table-cell;vertical-align:middle.這樣就能夠使其垂直居中。

我以上提到的都是經常使用的方法，不全面，也沒深刻講。還有用CSS expression方法實現水平居中的等等方法。