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