CSS實(shí)現(xiàn)元素水平居中

figofuture 發(fā)布于2019-08-28 18:14 / 2451人閱讀

摘要：實(shí)現(xiàn)元素水平居中元素主要分為塊級(jí)元素和行內(nèi)元素，所以對(duì)元素進(jìn)行水平居中也分這兩種情況來討論，另外塊級(jí)元素的實(shí)現(xiàn)比較復(fù)雜，將分情況討論。

CSS實(shí)現(xiàn)元素水平居中

元素主要分為塊級(jí)元素和行內(nèi)元素，所以對(duì)元素進(jìn)行水平居中也分這兩種情況來討論，另外塊級(jí)元素的實(shí)現(xiàn)比較復(fù)雜，將分情況討論。

一、行內(nèi)元素

常用行內(nèi)元素為a/img/input/span 等，標(biāo)簽內(nèi)的HTML文本也屬于此類。對(duì)于此類情況，水平居中是通過給父元素設(shè)置 text-align:center來實(shí)現(xiàn)的。
HTML結(jié)構(gòu)：


  
    Hello World!!!

CSS樣式：

二、塊級(jí)元素

常用塊級(jí)元素為div/table/ul/dl/form/h1/p等。根據(jù)應(yīng)用場景不同又分為定寬塊級(jí)與不定寬塊級(jí)兩種情況，分別討論。

1.定寬塊級(jí)元素

滿足**定寬**和**塊狀**兩個(gè)條件的元素是可以通過設(shè)置**“左右margin”值為“auto”**來實(shí)現(xiàn)居中的。
HTML結(jié)構(gòu)：


  
    Hello World!!!

CSS樣式：

2.不定寬塊級(jí)元素

我們經(jīng)常會(huì)遇到不定寬度塊級(jí)元素的使用，如分頁導(dǎo)航，因?yàn)榉猪摰臄?shù)目不定，所以不能用寬度限制住。此時(shí)對(duì)元素進(jìn)行水平居中主要有三種方式：

加入 table 標(biāo)簽

設(shè)置 display;inline 方法

設(shè)置 position:relative 和 left:50%;

2.1加入 table 標(biāo)簽

第一步：為需要設(shè)置的居中的元素外面加入一個(gè) table 標(biāo)簽 ( 包括、、 )。

第二步：為這個(gè) table 設(shè)置“左右 margin:auto”（這個(gè)和定寬塊狀元素的方法一樣）。
HTML結(jié)構(gòu)：

CSS樣式：

**這種方法的缺點(diǎn)是增加了無語義的HTML標(biāo)簽，增加了嵌套深度

2.2設(shè)置 display;inline 方法

改變塊級(jí)元素的 dispaly 為 inline 類型，然后使用 text-align:center 來實(shí)現(xiàn)居中效果。
HTML結(jié)構(gòu)：

CSS樣式：

這種方法的缺點(diǎn)是將塊級(jí)元素的display設(shè)置為inline，于是少了很多功能，比如盒子模型

2.3設(shè)置 position:relative 和 left:50%;

通過給父元素設(shè)置 float，然后給父元素設(shè)置 position:relative 和 left:50%，子元素設(shè)置 position:relative 和 left:-50% 來實(shí)現(xiàn)水平居中。
HTML結(jié)構(gòu)：