CSS垂直居中，你會多少種寫法？

CSS · 發表 2019-04-25 23:32:44

摘要： CSS控制居中是前端開發中非常常用的佈局技能，本文列出幾種CSS控制元素居中的幾種方法。談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由於HTML文件流是水平方向的，所以水平方向上的佈局控制比垂直方向要簡單很多，居中也是如此。不過（水平）垂直居中還是有很多種寫...

CSS控制居中是前端開發中非常常用的佈局技能，本文列出幾種CSS控制元素居中的幾種方法。

談及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由於HTML文件流是水平方向的，所以水平方向上的佈局控制比垂直方向要簡單很多，居中也是如此。不過（水平）垂直居中還是有很多種寫法，至少一隻手是數不過來了，本文列出幾種，並進行簡單比較。

一、水平居中

使用CSS控制水平居中很簡單：

塊級元素設定width,並設定margin auto
內聯元素父元素設定text-align center

HTML程式碼如下:

<div class="container">
<div class="content">
水平居中哦
</div>
</div>

1. 塊級元素水平居中

.container {
height: 300px;
width: 300px;
border: 1px solid red;
}

.content {
width: 10rem;
border: 1px solid green;
margin: 0 auto;
}

效果：

2. 內聯元素水平居中

.container {
height: 300px;
width: 300px;
border: 1px solid red;
text-align: center;
}

.content {
display: inline-block;
border: 1px solid green;
}

效果：

程式碼很簡單，而且沒什麼相容性問題，所以通常也不需要用別的複雜方式來實現水平居中效果。

二、水平垂直居中

使用CSS控制垂直居中（或者水平垂直居中）就不像控制垂直居中那麼方便，這裡主要羅列幾種。

1. flex佈局

flex佈局出現以後，垂直居中就很方便了，直接設定父元素：

display flex
align-items center

如果同時要水平居中，則同時設定：

justify-content center

需要注意的是IE10+才支援，webkit字首瀏覽器設定flex屬性需要加webkit。

.container {
width: 300px;
height: 300px;
border: 1px solid red;
display: -webkit-flex;
display: flex; // 關鍵屬性
align-items: center;　// 垂直居中
justify-content: center // 水平居中
}

.content {
border: 1px solid green;
}

2. margin+ position:absolute佈局

position: absolute佈局的元素，通過設定top/bottom, left/right這兩對屬性，可以讓元素在垂直方向和水平方向分別具有了自適應的特性。就像div在水平方向的預設表現一樣!

上文中對於塊級元素的水平居中，我們設定寬度然後配合以margin可以實現水平居中。而對於設定了top/bottom,left/right的absolute定位元素，我們設定寬高再配合margin就可以達到水平垂直居中：

.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid red;
}

.content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 200px;
height: 100px;
margin: auto;
border: 1px solid green;
}

效果：

相容性很好，IE8以上支援。

3. transform + absolute

absolute定位元素的left、top屬性是子元素的左邊界、上邊界相對父元素進行定位；transform是CSS3中非常強大的一個屬性，可以接收多個屬性值，包括旋轉、縮放、平移等多種功能。這裡使用二者配合，先將子元素左上定點定位到父元素中心點，再使用transform將子元素中心點移動到父元素的中心點即可：

.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid red;
}

.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid green;
}

效果：

這個方法有個小缺陷，就是translate函式的引數，最後的計算值不能為小數，否則有的瀏覽器渲染出來效果會模糊，所以使用本方法的話最好設定一下寬高為偶數。

4. absolute+margin負值

與上一種方法很類似，上一種方法是使用transform將元素向左上平移，本方法則是使用margin負值的方式將元素拉向左上角。

程式碼：

.container {
width: 300px;
height: 300px;
position: relative;
border: 1px solid red;
}

.content {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 100px;
margin-top: -50px;
margin-left: -100px;
border: 1px solid green;
}

效果：

5. absolute + calc

從上兩種方法可以看到，absolute設定了left和top再通過平移或者margin將元素重新定位回去。如果我們直接可以計算出正確的left和top值，豈不是一次到位？calc函式正有此功能，當然我們需要知道子元素的寬高：

.container {
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
position: relative;
}

.content {
position: absolute;
border: 1px solid green;
width: 200px;
height: 100px;
left: calc(50% - 100px);
top: calc(50% - 50px);
}

效果：

6. line-height + vertical-align

vertical-align是一個作用於內聯元素的屬性。內聯元素的特性是會和其它內聯元素或者文字在同一行顯示，但是預設情況下是與父元素“基線對齊”的。這裡的的基線指的是父元素每一行中的一個垂直位置，是英文ｘ下邊緣所在的水平, 通過設定vertical-align為middle可以將內聯元素的中部對齊父元素的中部（基線+字母ｘ的一半高度）。所以可以利用這一點，將父元素的行高設定為其自身高度，然後將子元素與父元素中線對齊，即可實現垂直居中。