小伙伴們每次在寫網(wǎng)頁時(shí)會(huì)經(jīng)常遇到需要將元素垂直或水平居中的時(shí)候，往往面臨著方法的選擇，而各種方法有的簡(jiǎn)單，有的困難，還有的有一些坑，在選擇方法時(shí)我們應(yīng)該怎么做才能不走彎路呢？

　　話不多說，現(xiàn)在就來分享我的一些方法，以我們最常見的網(wǎng)頁為例。

　　上圖網(wǎng)頁中，紅框部分內(nèi)的左右元素都是水平居中顯示的，其中既有大小不一的文本又有圖片，面對(duì)這種情況只要我們解決其中一個(gè)，另外三個(gè)就很簡(jiǎn)單了，那么這一個(gè)我們應(yīng)該怎么處理呢？

　　水平居中方法：

　　對(duì)于元素水平居中常用我們有二種辦法：

　　方法一：text-align:center文本在容器里水平居中，讓inline與inline-block在容器里水平居中，text-align添加給父元素。

　　方法二：margin: 0 aut0; 讓一個(gè)有寬度的塊元素在容器(父元素)里水平居中，margin: 0 auto添加給當(dāng)前元素。

　　(除此之外如果知道詳細(xì)的布局?jǐn)?shù)據(jù)。也可以根據(jù)情況手動(dòng)設(shè)置margin或padding等元素調(diào)整，不過不建議使用，有毒副作用)

　　圖片：

　　首先是圖片，在選擇方法之前，我們應(yīng)該知道圖片的類型是inline-block類型，在選用方法時(shí)對(duì)于經(jīng)常使用方法二的人就需要注意，margin: 0 auto;的適用對(duì)象是有寬度的塊元素，圖片本身自然有寬度，但并不是塊元素，需要先將其通過display: block;將圖片轉(zhuǎn)化為塊元素才能使用方法二。

　　相比而下，方法一就很簡(jiǎn)單了，無需轉(zhuǎn)化元素類型，直接在父元素內(nèi)使用該屬性即可。

　　文本：

　　其次是文本，文本的嵌套既有使用inline類型父元素嵌套的，又有使用block類型嵌套的。針對(duì)不同的情況，我們選用的方法也不同。

　　1. 嵌套inline類型的父元素，若想水平居中則在父元素下添加text_align:center；

　　2. 嵌套block類型的父元素，若想水平居中則在本身元素下添加margin: 0 auto；

　　垂直居中方法：

　　方法一：line-height：行高高度等于容器高度，只能實(shí)現(xiàn)單行文本在容器里垂直居中，line-height添加給容器。

　　方法二：vertical-align: middle;使一個(gè)inline-block類型的元素垂直居中。

　　方法三：通過定位，為需要垂直居中的元素設(shè)置absolute類型的定位，然后給父元素設(shè)置relative類型的定位，然后

　　或者：

　　即可。

　　方法二有毒，需要4個(gè)條件!!!

　　方法二的條件：

　　1. 給當(dāng)前元素在結(jié)構(gòu)上添加一個(gè)弟弟元素(必須和當(dāng)前元素寫在一行上)。

　　2. 給當(dāng)前元素和弟弟添加display：inline-block；

　　3. 給弟弟添加height與父元素同高；

　　4. 給當(dāng)前元素和弟弟元素添加vertical-align：middle；

　　所以對(duì)于文本，我們使用方法一簡(jiǎn)單方便。

　　對(duì)于元素類型為inline-block的圖片，我們使用方法二或方法三都可以。

　　對(duì)于block類型，我們就使用方法三。

　　再回到我們的網(wǎng)頁，其實(shí)還是水平居中用的較多，水平居中設(shè)置完畢后，垂直方向的距離可以用margin與padding進(jìn)行調(diào)整，這樣很快就寫好了。

　　其實(shí)最主要的合適頭腦清晰，合理選擇方法，選對(duì)了就會(huì)寫的順利，否則選錯(cuò)方法就這一堆堆的坑填都填不完。

　　更多關(guān)于“前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來試聽。

　　注：本文部分文字和圖片來源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。版權(quán)歸原作者所有!