解決垂直居中佈局問題，怎能不知道這六種CSS方法？

sas???發表於2016-12-02
CSS

垂直居中作為一個常見佈局形式，或多或少的會給不熟悉頁面佈局的人帶來困擾，這裡參考Steven Bradley總結的六種佈局方法，帶給大家一些新的思考。這裡介紹的方法都是常規的CSS方法，可以垂直居中行內元素以及塊級元素，實際上CSS3的flex佈局方法可以完美解決類似垂直居中，水平居中，分散對齊等常見的佈局形式，具體可以參看阮一峰老師的這篇文章Flex 佈局教程。

正文

通過CSS實現水平居中相當簡單。當被居中的元素是內聯元素(行內元素)時，我們可以使用text-align:center在父元素中水平居中。當元素是一個塊級元素時，我們給定它的寬度，然後把它的左邊距和右邊距設定成auto，也可以實現水平居中。

考慮到text-align:center可以水平居中，為了垂直居中大部分人首先想到的應該是vertical-align屬性。看起來很符合邏輯，如果你熟悉表格佈局，你很有可能使用過valign屬性，這樣也會讓你相信vertical-align應該也是這樣。

然而valign只對表格單元有效，vertical-align也是類似的，它即對錶格單元有效，又對一些內聯元素有效。

vertical-align值的意義和其父級內聯元素有關。

  • 在一行文字內，其值是相對於行高的。
  • 在一個表格單元內，其值是相對於表格高度演算法，通常是指一行的高度。

很遺憾vertical-align對塊級元素不起作用，像一個div裡面的段落。我們大多數可以想出來，這並不是所有的解決方案。

儘管我們有其他方法居中塊級元素，我們仍然可以在恰當的時候使用vertical-align。選擇那個方法主要依賴於你想居中在何種容器元素中。

關於vertical-align更多介紹，可以看看鑫大神的文章，點這裡

1.line-height方法

這種方法適用於垂直居中單行文字的情況。我們要做的只是給包含文字的元素設定一個行高(line-height)，只要保證行高大於文字的字型大小就可以了。

通常情況下，文字的上下會有相同的間距，文字剛好垂直居中。

大部分方法都建議把元素的height和元素的line-height設定成一樣的值。我認為設定height是沒有必要的，但是如果僅僅設定line-height不起作用，設定height可能就是解決辦法(這樣看來，最好height,line-height都設定，並且值保持一致)。

html

<div id="parent">
    <div id="child"> Text here </div>
<div>

css

#child{
    line-height: 200px;
}

上面的程式碼可以執行在任意的瀏覽器中，但是它只對單行文字有效，如果文字換行你必須使用另外的方法。200px是隨意設定的，你可以設定成任意大於字型大小的值。

2.css table方法

通過在table cell元素上應用vertical-align屬性來實現。

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

把父級div的display設定成table,把子級div的display屬性設定成table-cell。然後在子級div上應用vertical-align屬性，並且設定成middle。這樣子級div就相當於一個垂直居中的容器，你可以往裡面放任意內容包括行內元素，塊級元素，並且這些內容都是相對父級div元素垂直居中的。

這種方法存在相容性問題，只對IE8+起作用。

3.absolute定位和負margin方法

這種方法適用於塊級元素，並且對任意瀏覽器都有效。唯一的要求是必須設定垂直居中的塊級元素的高度。

其實用這種方式既可以垂直居中塊級元素，又可以水平居中塊級元素；垂直居中塊級元素，那麼塊級元素必須設定高度；水平居中塊級元素，那麼塊級元素必須設定寬度。

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

首先設定父級以及子級div的position屬性；然後把子級div的top屬性left屬性都設定為50%，這樣的話子級div快的左頂點就在父級div塊的中間位置了；接下來要做的就是把子級div往上移動其半個高度，往左移動其半個寬度，此時子級div塊才算在父級div塊的中間了。這也是為什麼一定要先知道子級div塊高度和寬度的原因。

為了做到上面的第三步，可以設定子級div塊的top margin等於負的高度的一半，left margin等於負的寬度的一半。

和第二種方法不同，這種方法適用與塊級元素。然而如果子級div的大小比父級div的大小要大，那麼子級div會有一部分內容看不到，所以使用這種方式你最好知道子級div塊的寬高。

4.absolute定位和拉伸方法

使用這種方式必須把父級元素設定成relative定位，把子級元素設定為absolute定位。

下面的程式碼既可以垂直居中，也可以水平居中。

html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

這種方法的原理是通過設定子元素距父元素4條邊的top,left,bottom,right值為0，而讓子元素自動向四條邊拉伸，因為字元素比父元素要小，所以不能觸碰到任意一條邊。

把margin設定成auto，可以讓每個相對邊的margin值一樣，這樣就可以讓字div在父div中居中。

另外這種方法不支援IE8以下版本的IE瀏覽器，並且也有上面的方法中存在的問題，就是如果字元素中內容很長，會導致超出內容不可見。

5.設定相同的padding-top和padding-bottom方法

在上面的方法中，我們讓瀏覽器自動設定子元素的margin值，所以可以保證margin值是相同的。這個方法要做的也類似，只不過要確切的設定父元素的top和bottom的padding值。
html

<div id="parent">
    <div id="child">Content here</div>
</div>

css

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

在上面的css中子元素父元素都設定了padding-top和padding-bottoom值。設定子元素的padding可以確保子元素的內容垂直居中，設定父元素的padding可以確保整個子元素在父元素中居中。

示例中使用了相對單位，允許每個div的padding自動變化。如果需要設定絕對地址，你需要計算出正確的padding值。設定子元素的padding可以確保子元素的內容垂直居中，設定父元素的padding可以確保整個子元素在父元素中居中。

例如，如果父元素的高度是400px，子元素的高度是100px，那麼子元素和父元素的padding-top和padding-bottom值應該設定為150px。

150 + 150 + 100 = 400

此時如果還用百分比的話，就不能居中了，除非這個百分比算出來的值剛好等於150px。

這個方法適用於所有的瀏覽器。缺點就是有點計算量。

注意：這種方法是通過設定包裹元素的padding來實現的，這樣的話，你就不用再設定內部元素有相同的margin了。這裡雖然使用了padding來實現，實際上也可以設定margin來實現，主要依賴程式碼需要。

6.浮動div方法

最後一種方法需要一個空的浮動的div，用來控制子元素在文件流的那個位置。注意浮動div必須在子元素前面。

html

<div id="parent">
    <div id="floater"></div>
    <div id="child">Content here</div>
</div>

css

#parent {height: 250px;}

#floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}

#child {
    clear: both;
    height: 100px;
}

設定一個浮動的子div元素，並且設定其高度等於父div元素的50%。這樣子div元素就會充滿父div元素的上半部分。

因為這個子div元素從正常的文件流中移除了，所以我們需要清除其它子元素兩邊的浮動，這裡使用了clear:both，但是實際上只需要清除和浮動元素相同方向上的浮動就可以了。

此時另一個非浮動子div元素的上邊框應該與浮動子div元素的下邊框重合，然後需要把非浮動子div元素往上移動其高度的一半，可以通過設定浮動子div元素的margin-bottom值為負的非浮動子div元素高度的一半來實現。

這種也適用於所有瀏覽器，但是缺點就是需要一個空的浮動div元素，然後你需要知道子div元素的高度。

參考資料：http://vanseodesign.com/css/vertical-centering/

相關文章