web前端技術分享之頁面元素水平居中

小夥伴們每次在寫網頁時會經常遇到需要將元素垂直或水平居中的時候，往往面臨著方法的選擇，而各種方法有的簡單，有的困難，還有的有一些坑，在選擇方法時我們應該怎麼做才能不走彎路呢？

話不多說，現在就來分享我的一些方法，在分享之前我先查查秘籍

咳咳，下面是正式內容，以我們最常見的網頁為例

上圖網頁中，紅框部分內的左右元素都是水平居中顯示的，其中既有大小不一的文字又有圖片，面對這種情況只要我們解決其中一個，另外三個就很簡單了，那麼這一個我們應該怎麼處理呢

水平居中方法：

對於元素水平居中常用我們有二種辦法：

方法一：text-align:center文字在容器裡水平居中，讓inline與inline-block在容器裡水平居中，text-align新增給父元素。

方法二：margin: 0 aut0; 讓一個有寬度的塊元素在容器（父元素）裡水平居中，margin: 0 auto新增給當前元素。

（除此之外如果知道詳細的佈局資料。也可以根據情況手動設定margin或padding等元素調整，不過不建議使用，有毒副作用）

圖片：

首先是圖片，在選擇方法之前，我們應該知道圖片的型別是inline-block型別，在選用方法時對於經常使用方法二的人就需要注意，margin: 0 auto;的適用物件是有寬度的塊元素，圖片本身自然有寬度，但並不是塊元素，需要先將其透過display: block；將圖片轉化為塊元素才能使用方法二。

相比而下，方法一就很簡單了，無需轉化元素型別，直接在父元素內使用該屬性即可。

文字：

其次是文字，文字的巢狀既有使用inline型別父元素巢狀的，又有使用block型別巢狀的。針對不同的情況，我們選用的方法也不同。

1.巢狀inline型別的父元素，若想水平居中則在父元素下新增text_align:center;

2.巢狀block型別的父元素，若想水平居中則在本身元素下新增margin: 0 auto;

垂直居中方法：

方法一：line-height：行高高度等於容器高度，只能實現單行文字在容器裡垂直居中，line-height新增給容器。

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

方法三：透過定位，為需要垂直居中的元素設定absolute型別的定位，然後給父元素設定relative型別的定位，然後

• top:0;
• left:0;
• right:0;
• bottom:0;
• margin:auto;

或者：

• top:50%;
• left:50%;
• margin:-NNpx 0 0 -NNpx;
• /*NN為元素寬高的一半**/

方法二有毒，需要4個條件！！！

1.給當前元素在結構上新增一個弟弟元素（必須和當前元素寫在一行上）

2.給當前元素和弟弟新增display：inline-block;

3.給弟弟新增height與父元素同高

4.給當前元素和弟弟元素新增vertical-align：middle;

所以對於文字，我們使用方法一簡單方便。 對於元素型別為inline-block的圖片，我們使用方法二或方法三都可以。 對於block型別，我們就使用方法三。

再回到我們的網頁，其實還是水平居中用的較多，水平居中設定完畢後，垂直方向的距離可以用margin與padding進行調整，這樣很快就寫好了。

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