css是網(wǎng)頁(yè)設(shè)計(jì)過(guò)程當(dāng)中創(chuàng)建了一個(gè)專(zhuān)業(yè)術(shù)語(yǔ)，叫做層疊樣式表，屬于一種計(jì)算機(jī)程序語(yǔ)言，許多人在使用這一個(gè)層疊樣式表時(shí)，經(jīng)常會(huì)問(wèn)，css是如何居中的?今天小編就來(lái)說(shuō)一說(shuō)css的具體幾種方式。

css居中——水平居中

顧名思義，行內(nèi)元素居中是只針對(duì)行內(nèi)元素的，比如文本(text)、圖片(img)、按鈕等行內(nèi)元素，可通過(guò)給父元素設(shè)置text-align:center來(lái)實(shí)現(xiàn)。另外，如果塊狀元素屬性display被設(shè)置為inline時(shí)，也是可以使用這種方法。但有個(gè)首要條件是子元素必須沒(méi)有被float影響，否則一切都是無(wú)用功。

.div1{

text-align:center;

}

Helloworld

2、塊狀元素居中

(1)、定寬塊狀元素居中

滿(mǎn)足定寬(塊狀元素的寬度width為固定值)和塊狀兩個(gè)條件的元素可以通過(guò)設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中。

.div1{

width:200px;

border:1pxsolidred;

margin:0auto;

}

Helloworld

(2)、不定寬塊狀元素居中

在實(shí)際工作中我們會(huì)遇到需要為“不定寬度的塊狀元素”設(shè)置居中，比如網(wǎng)頁(yè)上的分頁(yè)導(dǎo)航，因?yàn)榉猪?yè)的數(shù)量是不確定的，所以我們不能通過(guò)設(shè)置寬度來(lái)限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

有三種方法可以對(duì)不定寬塊狀元素進(jìn)行居中：

方法1：

將要顯示的元素加入到table標(biāo)簽當(dāng)中，然后為table標(biāo)簽設(shè)置“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中;或使用display:table;然后設(shè)該元素“左右margin”值為“auto”來(lái)實(shí)現(xiàn)居中。后面的display:table;方法會(huì)更簡(jiǎn)潔。

為什么加入table標(biāo)簽?是利用table標(biāo)簽的長(zhǎng)度自適應(yīng)性—即不定義其長(zhǎng)度也不默認(rèn)父元素body的長(zhǎng)度(table其長(zhǎng)度根據(jù)其內(nèi)文本長(zhǎng)度決定)，因此可以看做一個(gè)定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。

方法2：

改變塊級(jí)元素的display為inline類(lèi)型(設(shè)置為行內(nèi)元素顯示)，然后使用text-align:center來(lái)實(shí)現(xiàn)居中效果。

這種方法相比第一種方法的優(yōu)勢(shì)是不用增加無(wú)語(yǔ)義標(biāo)簽，但也存在著一些問(wèn)題：它將塊狀元素的display類(lèi)型改為inline，變成了行內(nèi)元素，所以少了一些功能，比如設(shè)定長(zhǎng)度值(變成inline-block就可以設(shè)置寬高)。

方法3：

通過(guò)給父元素設(shè)置float，然后給父元素設(shè)置position:relative和left:50%，子元素設(shè)置position:relative和left:-50%來(lái)實(shí)現(xiàn)水平居中。

　　css垂直居中方法

垂直居中可分為父元素高度確定的單行文本，以及父元素高度確定的多行文本。

1、父元素高度確定的單行文本的豎直居中的方法是通過(guò)設(shè)置父元素的height和line-height高度一致來(lái)實(shí)現(xiàn)的。(height:該元素的高度，line-height:顧名思義，行高，指在文本中，行與行之間的基線(xiàn)間的距離)。

2、父元素高度確定的多行文本

有兩種方法：

方法1：

使用插入table(包括tbody、tr、td)標(biāo)簽，同時(shí)設(shè)置vertical-align：middle。

方法2：

設(shè)置塊級(jí)元素的display為table-cell(設(shè)置為表格單元顯示)，激活vertical-align屬性。但這種方法兼容性比較差，IE6、7并不支持這個(gè)樣式。

以上就是有關(guān)css居中如何操作的所有內(nèi)容，由此可見(jiàn)要掌握一定的方法，那么居中還是非常的簡(jiǎn)單的，如果你還想了解更多的內(nèi)容，歡迎關(guān)注我們文軍營(yíng)銷(xiāo)的官網(wǎng)在這里還有更多的精彩內(nèi)容，更多有趣的知識(shí)等著你。

推薦閱讀