CSS 垂直居中

時間  2019-12-09
標籤 css 垂直 居中 欄目 CSS 简体版
原文   原文鏈接

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

 

CSS實現元素居中原理解析

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

在 CSS 中要設置元素水平垂直居中是一個很是常見的需求了。但就是這樣一個從理論上來看彷佛實現起來極其簡單的，在實踐中，它每每難住了不少人。瀏覽器

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

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

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

行內元素

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

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 變爲：code

1
2
3
4
5
6
7
 
.main {
 width: 300px;
 height: 300px;
 background-color: #50ba8b;

 text-align: center; /* 水平居中 */
}

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

垂直居中

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;
}

實現原理：

  1. 設置 .content 元素的 display 爲 inline-block。做用在於既能重置外部的 line-height 爲正常大小，又能保持行內元素特性，從而能夠設置 vertical-align 屬性，以及產生一個很是關鍵的「行框盒子」。咱們須要的其實並非這個「行框盒子」，而是每一個「行框盒子」都會附帶的一個產物 —— 「幽靈空白節點」，即一個寬度爲 0，表現如同普通字符的看不見的「節點」。有了這個「幽靈空白節點」，咱們的 line-height: 300px; 就有了做用的對象，從而至關於在 .content 元素前面撐起了一個高度爲 300px 的寬度爲 0 的行內元素。
  2. 由於行內元素默認都是基線對齊的，因此咱們經過對 .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;
}

實現原理：

  1. 設置 .main 元素爲相對定位 position: relative;，這樣其子元素設置絕對定位時就相對它了。
  2. 而後設置 .content 元素爲絕對定位 position: absolute; 並設置它的 top、left、bottom、right 都爲0，這樣該元素的元素的尺寸表現爲「格式化寬度和格式化高度」，和 <div> 的「正常流寬度」同樣，同屬於外部尺寸，也就是尺寸自動填充父級元素的可用尺寸，但因爲此時咱們設置了 .content 元素的寬高，就限制了元素自動填充，這樣就多出來150px的空間了。
  3. 最後咱們設置 .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;
}

實現原理：

  1. 設置 .main 元素爲相對定位 position: relative;，這樣其子元素設置絕對定位時就相對它了。
  2. 而後設置 .content 元素爲絕對定位 position: absolute; 並設置 top: 50%;、left: 50%;，這樣.content 元素的左上角就位於 .main 元素的中心了。
  3. 最後設置 .content 元素 margin-left: -75px;、margin-top: -75px; 將自身左移及上移寬高的一半，這樣 .content 元素的中心處於 .main 元素的中心處，天然就實現了居中效果。
  4. 這種方法的缺點就是須要固定 .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%);
}

實現原理：

  1. 設置 .main 元素爲相對定位 position: relative;，這樣其子元素設置絕對定位時就相對它了。
  2. 而後設置 .content 元素爲絕對定位 position: absolute; 並設置 top: 50%;、left: 50%;，這樣.content 元素的左上角就位於 .main 元素的中心了。
  3. 最後設置 .content 元素 transform: translate(-50%, -50%); 將自身左移及上移寬高的一半，這樣 .content 元素的中心處於 .main 元素的中心處，天然就實現了居中效果。
  4. 這種方法的好處就是不須要固定 .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;
}

實現原理：

  1. 設置 .main 元素 display: flex;。
  2. 而後設置 .content 元素爲 margin: auto; 便可實現居中。
  3. 這是毋庸置疑的最佳解決方案，咱們不須要設置 .content 元素爲絕對定位，margin: auto 天然就能夠做用於寬高，並且咱們也不須要設置 .content 元素的寬高， 由於Flexbox(伸縮盒)是專門針對這類需求所設計的。
  4. 缺點就是目前瀏覽器支持程度相對其它方式會低些。

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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程