HTML技巧篇：實現元素水平與垂直居中的幾種方式

篇文章主要給大家介紹一下如何使用html+css實現元素的水平與垂直居中效果，這也是我們網頁在編碼制作中會經常用到的問題。

1）單行文本的居中

主要實現css代碼：

水平居中：text-align:center;

垂直居中：line-height:XXpx; /*line-height與元素的height的值一致*/

我們先來看這樣一個例子，加入我們這里有一個div，寬度和高度為300px，背景顏色為黑色，然后在div中有一行簡短文字，我們只需要使用line-height:200px;就可以實現文字的居中效果，具體的代碼如下所示：

由上圖可以看出我們實現了單行文字的垂直居中效果，但是很多時候我們的文字并不知道具體有多少，可能有一行，也可能有很多行，那么遇到多行文字的這種問題我們要如何處理呢。

2）多行文本的垂直居中

對于多行文本的垂直居中我們有很多種實現方式，我們這里逐個的來看一下；

1、使用display:table來實現

主要實現代碼：

display: table使塊狀元素成為一個塊級表格;

display: table-cell;子元素設置成表格單元格;

vertical-align: middle;使表格內容居中顯示，即可實現垂直居中的效果;

具體的html與css的代碼就如下所示：

2、使用absolute與transform配合實現

主要實現代碼：

position:absolute; 首先給文本絕對定位；

left:50%;top:50%;transform:translate(-50%,-50%); 讓文本距離盒子左邊和上邊分別為50%，再用transform向左（上）平移它自己寬度（高度）的50%，也就達到居中效果了。

具體的html與css的代碼就如下所示：

3、使用flex實現

主要實現代碼：

display: flex;設置 display 屬性的值為 flex 將其定義為彈性容器

align-items: center;定義項目在交叉軸（縱軸）上如何對齊，垂直對齊居中

justify-content: center; 定義了項目在主軸上的對齊方式，水平對齊居中

具體的html與css的代碼就如下所示：

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習一下，有需要源碼的可以直接私信【網站源碼】即可。

每日金句：了解別人心里想什么，你才能得到自己想要的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

讓元素垂直居中的二十三個方法，只列出解決方案，及適用場景，哪個需要我舉例子說明的，可以給小鄭留言。

方法一、Line-height

適用場景：單行文字垂直居中技巧

方法二、Line-height + inline-block

適用場景：多對象垂直居中技巧

方法三、：before + inline-block

適用場景：多對象的CSS垂直居中技巧

方法四、absolute + margin負值

適用場景：多行文字的垂直居中技巧

之所以整理這類專題的手冊，就是CSS相關的內容實在太碎和零散，同時又夾雜著相關的兼容問題。遇到問題時，我們有時候過度依賴搜索引擎進行求證解決，解決完也沒做認真的歸納和總結。再次遇到此類問題時，我們有可能還不會，這就是我歸納這個手冊的目的，我會把日常工作中經常會用到的高頻CSS相關方法歸納到這個手冊里（有的內容可能來源其它作者），歡迎你持續的訂閱和關注。

今天我們一起來梳理下CSS垂直居中的幾種方法，我們在布局一個頁面時，通常都會用到水平置中和垂直置中，處理水平居中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問題，但一直以來最麻煩對齊問題就是「垂直居中」，以下將介紹七種單純利用CSS垂直置中的方式，其實一點也不難(當然跟水平居中比起來難了一點)，只需要理解背后的原理就可以輕松應用。

1、設定行高( line-height )

設定行高是垂直居中最簡單的方式，適用于「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為inline-block屬性的div，若將line-height設成和高度一樣的數值，則內容的行內元素就會被垂直置中，因為是行高，所以會在行內元素的上下都加上行高的1/2，所以就垂直置中了！不過由此就可以看出，為什么必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。CSS范例：外層div0，內容redbox，讓redbox水平垂直置中。

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
 line-height:150px;
 text-align:center;
}
.redbox{
 display:inline-block;
 width:30px;
 height:30px;
 background:#c00;
}

2、添加偽元素( ::before、::after )

剛剛第一種方法，雖然是最簡單的方法(適用于單行標題)，不過就是只能單行，所以我們如果要讓多行的元素也可以垂直居中，就須要使用偽元素的方式。在此之前，先解釋一下CSS里頭vertical-align這個屬性，這個屬性雖然是垂直置中，不過卻是指在元素內的所有元素垂直位置互相置中，并不是相對于外框的高度垂直居中。(下面的CSS會造成這種樣子的垂直居中)

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
 text-align:center;
}
.redbox{
 width:30px;
 height:30px;
 background:#c00;
 display:inline-block;
 vertical-align:middle;
}
.greenbox{
 width:30px;
 height:60px;
 background:#0c0;
 display:inline-block;
 vertical-align:middle;
}
.bluebox{
 width:30px;
 height:40px;
 background:#00f;
 display:inline-block;
 vertical-align:middle;
}

因此，如果有一個方塊變成了高度100%，那么其他的方塊就會真正的垂直居中。

.greenbox{
 width:30px;
 height:100%;
 background:#0c0;
 display:inline-block;
 vertical-align:middle;
}

但是我們總不能每次要垂直居中，都要添加一個奇怪的div在里頭吧！所以我們就要把腦筋動到「偽元素」身上，利用::before和::after添加div進到框框內，讓這個「偽」div的高度100%,就可以輕松地讓其他的div都居中。不過不過不過！div記得要把display設為inline-block，畢竟 vertical-align:middle 是針對行內元素，div本身是block，所以必須要做更改！

.div0::before{
 content:'';
 width:0;
 height:100%;
 display:inline-block;
 position:relative;
 vertical-align:middle;
 background:#f00;
}

3、calc 動態計算

看到這邊或許會有疑問，如果今天我的div必須是block，我該怎么讓它垂直居中呢？這時候就必須用到CSS特有的calc動態計算的能力，我們只要讓要居中的div的top屬性，與上方的距離是「50%的外框高度- 50%的div高度」，就可以做到垂直居中，至于為什么不用margin-top，因為margin抓到的是水平高度，必須要用top才會正確。

.div0{
 width:200px;
 height:150px;
 border:1px solid #000;
}
.redbox{
 position:relative； 
 width:30px;
 height:30px;
 background:#c00;
 float:left;
 top:calc(50% - 15px);
 margin-left:calc(50% - 45px);
}
.greenbox{
 position:relative；
 width:30px;
 height:80px;
 background:#0c0;
 float:left;
 top:calc(50% - 40px);
}
.bluebox{
 position:relative； 
 width:30px;
 height:40px;
 background:#00f;
 float:left;
 top:calc(50% - 20px);
}

4、使用表格或假裝表格

或許有些人會發現，在表格這個HTML里，要實現垂直置中是相當容易的，只需要下一行vertical-align:middle就可以，為什么呢？最主要的原因就在于table的display是table，而td的display是table-cell，所以我們除了直接使用表格之外，也可以將要垂直置中元素的父元素的display改為table-cell，就可以輕松實現，不過修改display有時候也會造成其他樣式屬性的連動影響，需要小心使用。

HTML：

<table>
 <tr>
 <td>
 <div>表格垂直居中</div>
 </td>
 </tr>
</table>
<div class="like-table">
 <div>假的表格垂直居中</div>
</div>

CSS：

.like-table{
 display:table-cell;
}
td,
.like-table{
 width:150px;
 height:100px;
 border:1px solid #000;
 vertical-align: middle;
}
td div,
.like-table div{
 width:100px;
 height:50px;
 margin:0 auto;
 color:#fff;
 font-size:12px;
 line-height: 50px;
 text-align: center;
 background:#c00;
}
.like-table div{
 background:#069;
}

5、transform

transform是CSS3的新屬性，主要用于元素的變形、旋轉和位移，利用transform里頭的translateY (改變垂直的位移，如果使用百分比為單位，則是以元素本身的長寬為基準)，搭配元素本身的top屬性，就可以做出垂直居中的效果，需要注意的地方是，子元素必須要加上position:relative，不然就會沒有效果喔。

.use-transform{
 width:200px;
 height:200px;
 border:1px solid #000;
}
.use-transform div{
 position: relative;
 width:100px;
 height:50px;
 top:50%;
 transform:translateY(-50%);
 background:#095;
}

6、絕對定位

絕對定位就是CSS里頭的position:absolute，利用絕對位置來指定，但垂直置中的做法又和我們正統的絕對位置不太相同，是要將上下左右的數值都設為0，再搭配一個margin:auto，就可以辦到垂直置中，不過要特別注意的是，設定絕對定位的子元素，其父元素的position必須要指定為relative喔！而且絕對定位的元素是會互相覆蓋的，所以如果內容元素較多，可能就會有些問題。

.use-absolute{
 position: relative;
 width:200px;
 height:150px;
 border:1px solid #000;
}
.use-absolute div{
 position: absolute;
 width:100px;
 height:50px;
 top:0;
 right:0;
 bottom:0;
 left:0;
 margin:auto;
 background:#f60;
}

7、使用Flexbox

Flexbox可謂是我們在移動端用的最多的布局方法，因為大部分現代手機瀏覽器都支持這個方法了。Flexbox，使用align-items或align-content的屬性，輕輕松松就可以做到垂直居中的效果喔！

.use-flexbox{
 display:flex;
 align-items:center;
 justify-content:center;
 width:200px;
 height:150px;
 border:1px solid #000;
}
.use-flexbox div{
 width:100px;
 height:50px;
 background:#099;
}

由于flexbox布局的屬性眾多，如何方便記憶，筆者贈送大家一張圖：

上圖有可能你看不清楚，此圖高清無碼地址，歡迎下載使用：

https://www.qianduandaren.com/demo/images/flex.png

本文內容參考來源

https://www.oxxostudio.tw/articles/201502/css-vertical-align-7methods.html

由于源文是繁體，筆者在內容上做了一些調整。

小節

以上就是筆者整理的一些垂直居中的方法，由于垂直居中往往會動用到修改display這個屬性，往往會在排版上造成一些影響，例如不該用flexbox 的地方如果用了flexbox，不該用table 的地方用了table，不該用inline-block 的地方用了inline-block，后續反而要多寫許多其他的定位樣式來進行修正，那就有點本末倒置了，因此如何活用這些CSS 垂直居中的方法，就要依據大家的版面結構進行靈活運用啰！^_^ 如果你有其他本文沒有提及到的垂直居中方法，歡迎到留言區進行分析喲。

更多精彩內容，請關注“前端達人”公眾號

在線咨詢

上一篇：JavaScript+css實現的計時器動畫素材html頁面前端源碼
下一篇：HTML ul li 橫排居中排列的方法，三步驟及實例