http://www.laixiangran.cn/2018/04/30/CSS%E5%AE%9E%E7%8E%B0%E5%85%83%E7%B4%A0%E5%B1%85%E4%B8%AD%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/

?

CSS實現元素居中原理解析

發表于?2018-04-30?? | ??分類于?CSS?? | ??閱讀次數?44

在 CSS 中要設置元素水平垂直居中是一個非常常見的需求了。但就是這樣一個從理論上來看似乎實現起來極其簡單的，在實踐中，它往往難住了很多人。

讓元素水平居中相對比較簡單：如果它是一個行內元素，就對它的父元素應用?text-align: center；如果它是一個塊級元素，就對它自身應用?margin: auto。

然而如果要對一個元素進行垂直居中，那就沒有那么容易了，有時候光是想想就令人頭皮發麻了。

本文分別從行內元素和塊級元素進行說明，將目前比較流行的實現方式進行匯集并解析實現原理，方便大家查閱。這里要說明一點，每一種方式都不是十全十美的，關鍵要看自己的需求，從而分析出哪種實現方式是最合適的。

行內元素

首先我們先把基礎代碼寫出來：

1 2 3

<div class="main"> <span class="content">我是要居中的行內元素span</span> </div>

1 2 3 4 5 6 7 8 9 10

.main { width: 300px; height: 300px; background-color: #50ba8b; } .content { background-color: #5b4d4e; color: #FFFFFF; }

class 為?.main?的 div 包裹這一個 class 為?.content?的行內元素 span，我們的目的就是要讓?.content?元素 在?.main元素中居中。

水平居中

text-align

行內元素的水平居中比較簡單，我們直接在?.main?中添加?text-align: center;?即可，此時?.main?變為：

1 2 3 4 5 6 7

.main { width: 300px; height: 300px; background-color: #50ba8b; text-align: center; /* 水平居中 */ }

實現原理：?設置?text-align?的值為?center?，因為該屬性規定元素中的文本的水平對齊方式，那么設置為?center?則文本就水平居中了。

垂直居中

line-height

行內元素的垂直居中我們分為?一行?和?多行或者圖片等替換元素?來說明。

如果是?一行，那么我們可以使用?line-height?來實現，此時?.main?元素 css 代碼變為：

1 2 3 4 5 6 7

.main { width: 300px; height: 300px; /* 可以不設置 */ background-color: #50ba8b; line-height: 300px; /* 垂直居中 */ }

其實設置了?line-height?就可以讓文本垂直居中，并不需要同時設置?height，這里也是一直存在的一個誤區。

實現原理：?這種方式實現垂直居中運用的是 CSS 中“行距的上下等分機制”，這也說明了為什么該方式只適用于?一行?的文本。

還有一點需要說明是，這種方式實現的垂直居中是“近似”的，并不是完美的垂直居中，因為文字字形的垂直中線位置普遍要比真正的“行框盒子”的垂直中線位置低，而由于我們平時使用的 font-size 比較小，使得這點偏差不容易察覺出來，那么感官上也就看成是垂直居中了。

line-height 及 vertical-align

下面再來說說?多行或者圖片等替換元素?的垂直居中效果實現，這里我們需要同時借助?line-height?和?vertical-align來實現。

先讓文本換行：

1 2 3 4 5 6

<div class="main"> <span class="content"> 我是要居中的行內元素span <br> 我是要居中的行內元素span </span> </div>

再看修改之后的 css 代碼：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.main { width: 300px; background-color: #50ba8b; line-height: 300px; } .content { display: inline-block; background-color: #5b4d4e; color: #FFFFFF; line-height: 20px; margin: 0 20px; vertical-align: middle; }

實現原理：

設置?.content?元素的 display 為 inline-block。作用在于既能重置外部的 line-height 為正常大小，又能保持行內元素特性，從而可以設置 vertical-align 屬性，以及產生一個非常關鍵的“行框盒子”。我們需要的其實并不是這個“行框盒子”，而是每個“行框盒子”都會附帶的一個產物 —— “幽靈空白節點”，即一個寬度為 0，表現如同普通字符的看不見的“節點”。有了這個“幽靈空白節點”，我們的?line-height: 300px;?就有了作用的對象，從而相當于在?.content?元素前面撐起了一個高度為 300px 的寬度為 0 的行內元素。

因為行內元素默認都是基線對齊的，所以我們通過對?.content?元素設置?vertical-align: middle;?來調整多行文本的垂直位置，從而實現我們想要的“垂直居中”效果。這種方式也適用于?圖片等替換元素?的垂直居中效果。當然這里的“垂直居中”也是近似的，這是由于 vertical-align 導致的，具體為什么可以深入了解?vertical-align: middle;。

塊級元素

依然先把基礎代碼寫出來：

1 2 3

<div class="main"> <div class="content">我是要居中的塊級元素div</div> </div>

1 2 3 4 5 6 7 8 9 10 11

.main { width: 300px; height: 300px; background-color: #50ba8b; } .content { width: 150px; height: 150px; background-color: #5b4d4e; }

class 為?.main?的 div 包裹這一個 class 為?.content?的 塊級元素 div，我們的目的就是要讓?.content?元素 在?.main?元素中居中。

position + margin: auto

實現代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.main { width: 300px; height: 300px; background-color: #50ba8b; /*關鍵代碼*/ position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*關鍵代碼*/ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }

實現原理：

設置?.main?元素為相對定位?position: relative;，這樣其子元素設置絕對定位時就相對它了。

然后設置?.content?元素為絕對定位?position: absolute;?并設置它的?top、left、bottom、right?都為0，這樣該元素的元素的尺寸表現為“格式化寬度和格式化高度”，和?<div>?的“正常流寬度”一樣，同屬于外部尺寸，也就是尺寸自動填充父級元素的可用尺寸，但由于此時我們設置了?.content?元素的寬高，就限制了元素自動填充，這樣就多出來150px的空間了。

最后我們設置?.content?元素為?margin: auto;?，此時根據 auto 的計算規則，將上下左右剩余空間全部等分了，自然就居中了。

position + margin-left/top

實現代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

.main { width: 300px; height: 300px; background-color: #50ba8b; /*關鍵代碼*/ position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*關鍵代碼*/ position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -75px; }

實現原理：

設置?.main?元素為相對定位?position: relative;，這樣其子元素設置絕對定位時就相對它了。

然后設置?.content?元素為絕對定位?position: absolute;?并設置?top: 50%;、left: 50%;，這樣.content?元素的左上角就位于?.main?元素的中心了。

最后設置?.content?元素?margin-left: -75px;、margin-top: -75px;?將自身左移及上移寬高的一半，這樣?.content?元素的中心處于?.main?元素的中心處，自然就實現了居中效果。

這種方法的缺點就是需要固定?.content?元素的寬高。

position + translate

實現代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.main { width: 300px; height: 300px; background-color: #50ba8b; /*關鍵代碼*/ position: relative; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*關鍵代碼*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

實現原理：

設置?.main?元素為相對定位?position: relative;，這樣其子元素設置絕對定位時就相對它了。

然后設置?.content?元素為絕對定位?position: absolute;?并設置?top: 50%;、left: 50%;，這樣.content?元素的左上角就位于?.main?元素的中心了。

最后設置?.content?元素?transform: translate(-50%, -50%);?將自身左移及上移寬高的一半，這樣?.content?元素的中心處于?.main?元素的中心處，自然就實現了居中效果。

這種方法的好處就是不需要固定?.content?元素的寬高。

Flexbox

實現代碼如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

.main { width: 300px; height: 300px; background-color: #50ba8b; /*關鍵代碼*/ display: flex; } .content { width: 150px; height: 150px; background-color: #5b4d4e; /*關鍵代碼*/ margin: auto; }

實現原理：

設置?.main?元素?display: flex;。

然后設置?.content?元素為?margin: auto;?即可實現居中。

這是毋庸置疑的最佳解決方案，我們不需要設置?.content?元素為絕對定位，margin: auto?自然就可以作用于寬高，而且我們也不需要設置?.content?元素的寬高， 因為Flexbox(伸縮盒)是專門針對這類需求所設計的。

缺點就是目前瀏覽器支持程度相對其它方式會低些。

Flexbox 的另一個好處在于，它還可以將匿名容器(即沒有被標簽包裹的文本節點)垂直居中。比如我們不設置?.main?元素為?display: flex;，而是設置?.content?元素為?display: flex;，并借助 Flexbox 規范所引入的 align-items 和 justify-content 屬性，我們可以讓它內部的文本也實現居中（我們可以對.main?元素使用相同的屬性來使?.content?元素元素居中，但比?margin: auto?方法要更加優雅一些，并且同時起到了回退的作用）。

1 2 3 4 5 6 7 8 9 10 11

.content { width: 150px; height: 150px; background-color: #5b4d4e; /*關鍵代碼*/ display: flex; align-items: center; justify-content: center; margin: auto; }

轉載于:https://www.cnblogs.com/rjjs/p/10489347.html

總結

以上是生活随笔為你收集整理的CSS 垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。