189 6508 9135
在前端開發(fā)過程中，盒子居中是常常用到的。其中 ，居中又可以分為水平居中和垂直居中。水平居中是比較容易的，直接設(shè)置元素的margin: 0 auto就可以實(shí)現(xiàn)。但是垂直居中相對來說是比較復(fù)雜一些的。下面我們一起來討論一下實(shí)現(xiàn)垂直居中的方法。
首先，定義一個(gè)需要垂直居中的div元素，他的寬度和高度均為300px，背景色為橙色。代碼如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
.content {
width: 300px;
height: 300px;
background: orange;
}
</style></head><body>
<div class="content"></div></body></html>效果如下：
我們需要使得這個(gè)橙色的div居中，到底該怎么辦呢？首先我們實(shí)現(xiàn)水平居中，上面已經(jīng)提到過了，可以通過設(shè)置margin: 0 auto實(shí)現(xiàn)水平居中，代碼如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto;
}
</style></head><body>
<div class="content"></div></body></html>效果如下：
很好，已經(jīng)實(shí)現(xiàn)水平居中了！接下來該打大boss了——實(shí)現(xiàn)垂直居中。不過，在這之前，我們先要設(shè)置div元素的祖先元素html和body的高度為100%（因?yàn)樗麄兡J(rèn)是為0的），并且清除默認(rèn)樣式，即把margin和padding設(shè)置為0（如果不清除默認(rèn)樣式的話，瀏覽器就會出現(xiàn)滾動條，聰明的親，自己想想問什么）。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
}
</style></head><body>
<div class="content"></div></body></html>接下來，需要做的事情就是要讓div往下移動了。我們都知道top屬性可以使得元素向下偏移的。但是，由于默認(rèn)情況下，由于position的值為static（靜止的、不可以移動的），元素在文檔流里是從上往下、從左到右緊密的布局的，我們不可以直接通過top、left等屬性改變它的偏移。所以，想要移動元素的位置，就要把position設(shè)置為不是static的其他值，如relative,absolute,fixed等。然后，就可以通過top、bottom、right、left等屬性使它在文檔中發(fā)生位置偏移（注意，relative是不會使元素脫離文檔流的，absolute和fixed則會！也就是說，relative會占據(jù)著移動之前的位置，但是absolute和fixed就不會）。設(shè)置了position: relative后的代碼如下:
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*設(shè)置position屬性*/
}
</style></head><body>
<div class="content"></div></body></html>我們刷新一下頁面，發(fā)現(xiàn)跟之前是沒有任何變化的，因?yàn)椋覀儍H僅是使設(shè)置了元素的position=relative而已，但是還沒開始移動他的垂直偏移。好，下面我們就讓它偏移吧！垂直偏移需要用到top屬性，它的值可以是具體的像素，也可以是百分?jǐn)?shù)。因?yàn)槲覀儸F(xiàn)在不知道父元素（即body）的具體高度，所以，是不可以通過具體像素來偏移的，而應(yīng)該用百分?jǐn)?shù)。既然是要讓它居中嘛！好，那么我們就讓它的值為50%不就行了嗎？問題真的那么簡單，我們來試一下，就設(shè)置50%試一下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative; /*脫離文檔流*/
top: 50%; /*偏移*/
}
</style></head><body>
<div class="content"></div></body></html>效果如下圖所示：
div垂直方向上面并沒有居中。明顯是偏下了。下面，我們在瀏覽器中間畫一條紅線用來參考，如下圖：
通過觀察上圖，只要讓div的中心移動到紅線的位置，那么整個(gè)div就居中了。那怎么讓它中心移動到紅線處呢？從圖中可以觀察到，從div的中心到紅線的距離是div自身高度的一半。這時(shí)候，我們可以使用通過margin-top屬性來設(shè)置，因?yàn)閐iv的自身高度是300，所以，需要設(shè)置他的margin-top值為-150。為什么是要設(shè)置成負(fù)數(shù)的呢？因?yàn)檎龜?shù)是向下偏移，我們是希望div向上偏移，所以應(yīng)該是負(fù)數(shù)，如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
}
</style></head><body>
<div class="content"></div></body></html>效果如下：
確實(shí)已經(jīng)居中了。好興奮！有木有？！
除了可以使用margin-top把div往上偏移之外，CSS3的transform屬性也可以實(shí)現(xiàn)這個(gè)功能，通過設(shè)置div的transform: translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)。如下：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
}
</style></head><body>
<div class="content"></div></body></html>效果如下：
上面的兩種方法，我們都是基于設(shè)置div的top值為50%之后，再進(jìn)行調(diào)整垂偏移量來實(shí)現(xiàn)居中的。如果使用CSS3的彈性布局（flex）的話，問題就會變得容易多了。使用CSS3的彈性布局很簡單，只要設(shè)置父元素（這里是指body）的display的值為flex即可。具體代碼如下，對代碼不做過多的解釋，如果想了解彈性布局的可以看阮一峰老師的博客http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定義body的元素垂直居中*/
justify-content: center; /*定義body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
</style></head><body>
<div class="content"></div></body></html>效果：
除了上面3中方法之外，當(dāng)然可能還存在許多的可以實(shí)現(xiàn)垂直居中的方法。比如可以將父容器設(shè)置為display:table ，然后將子元素也就是要垂直居中顯示的元素設(shè)置為 display:table-cell 。但是，這是不值得推薦的，因?yàn)闀茐恼w的布局。如果用table布局，那么為什么不直接使用table標(biāo)簽了？那不更加方便嗎？
關(guān)于CSS實(shí)現(xiàn)垂直居中的方法，就寫這么多了。如果，發(fā)現(xiàn)哪里寫的不對的或者有更好的方法的，請?jiān)谠u論提出來，這樣大家可以一起討論、共同進(jìn)步！
最近，看了張鑫旭老師的《CSS世界》一書，不采用CSS3，而是使用了CSS2的vertical-align，通過一些黑科技手段實(shí)現(xiàn)了垂直居中，有興趣的同學(xué)可以研究一下。具體實(shí)現(xiàn)如下：
假設(shè)類名是.dialog，則 HTML 如下：
<div class="container"> <div class="dialog"> </div></div>
核心 CSS 代碼如下：
.container {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.5);
text-align: center;
font-size: 0;
white-space: nowrap;
overflow: auto;
}.container:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}.dialog {
display: inline-block;
vertical-align: middle;
text-align: left;
font-size: 14px;
white-space: normal;
}