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