資訊專欄INFORMATION COLUMN
摘要：我們在實際工作中經(jīng)常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設(shè)置水平居中和垂直居中。水平居中行內(nèi)元素。不定寬塊狀元素水平居中我們來學習一下這種方法。
水平居中 行內(nèi)元素。我們在實際工作中經(jīng)常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設(shè)置水平居中和垂直居中。
如果被設(shè)置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設(shè)置text-align:center來實現(xiàn)的。
定寬塊狀元素。當被設(shè)置元素為塊狀元素時用text-align：center就不起作用了，這時也分兩種情況： 定寬塊狀元素 和 不定寬塊狀元素 。我們先來講一講定寬塊狀元素。
滿足 定寬和塊狀 兩個條件的元素是可以通過設(shè)置左右margin值為auto來實現(xiàn)居中的。
在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設(shè)置居中，比如網(wǎng)頁上的分頁導航，因為分頁的數(shù)量是不確定的，所以我們不能通過設(shè)置寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）：
設(shè)置 display;inline 方法不定寬塊狀元素水平居中
改變塊級元素的 display 為 inline 類型，然后使用 text-align:center 來實現(xiàn)居中效果
設(shè)置 position:relative 和 left:50%;通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:-50% 來實現(xiàn)水平居中。
垂直居中 父元素高度確定的單行文本不定寬塊狀元素水平居中 我們來學習一下這種方法。
父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和 line-height 高度一致來實現(xiàn)的。
父元素高度確定的多行文本（方法一）使用插入 table (包括tbody、tr、td)標簽，同時設(shè)置 vertical-align：middle。
說到豎直居中，css 中有一個用于豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。因為 td 標簽默認情況下就默認設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。
