CSS之水平垂直居中
在css的世界里，如果我們想讓一個(gè)塊級(jí)元素水平居中，想必大家都知道利用margin:0 auto;嘛，這樣就可以讓塊級(jí)元素在它的父元素中水平居中了。
列如這樣：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
margin:0 auto;
width:50px;
height:50px;
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
View Code
運(yùn)行效果圖如下，綠色方塊水平居中于它的父元素
咦，那么問(wèn)題來(lái)了，我們想要綠色方塊垂直居中或者水平垂直居中呢？
是不是只要設(shè)置margin:auto 0;或margin:auto;就可以了呢？
曾經(jīng)我也是這么以為的，因?yàn)樵O(shè)置margin:0 auto;可以水平居中嘛。
但是垂直居中就不是這么回事啦。
在普通文檔流中，倘若你設(shè)置margin:auto，其實(shí)瀏覽器解析時(shí)，會(huì)理解為margin:0 auto;
（將margin-top和margin-bottom設(shè)置為0，而margin-left和margin-right設(shè)置為左右自適應(yīng)）。
摘自W3.org
如果你心存顧慮，可以將上面demo中的margin:0 auto;換成margin:auto;，運(yùn)行后的結(jié)果是一樣的。
咦，那如果我們現(xiàn)在想讓塊級(jí)元素垂直居中呢，如何處理？
| 方法一： |
將元素設(shè)置為絕對(duì)定位absolute，這樣就可以讓元素脫離普通文檔流，且absolute有一特性：會(huì)將元素的display設(shè)置為block。
然后，再設(shè)置絕對(duì)定位的坐標(biāo)(left,top,right,bottom)為0，這樣會(huì)使瀏覽器為絕對(duì)定位包裹一層新的盒子模型。
再結(jié)合margin，就可以你想水平居中(margin:0 auto;)就居中，垂直居中(margin:auto 0;)就居中了，水平垂直居中(margin:auto;)也完美。
下面列舉的demo為‘水平垂直居中’：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
margin: auto;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width:50px;
height:50px;
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
View Code
PS：position:fixed也可以脫離文檔流，so它和absolute是一樣兒滴，區(qū)別就是fixed是相對(duì)于瀏覽器窗口進(jìn)行定位的。
| 方法二： |
方法一是通過(guò)改變?cè)氐奈臋n流，那么除開(kāi)改變它的文檔流呢？
那我們就另辟蹊徑，計(jì)算元素的寬高嘛。
么子意思？
以‘垂直居中’舉例，倘若我們有個(gè)子元素child，需要垂直居中于它的父元素parent。如下：
圖一
那么首先我們得將子元素child以父元素的頂點(diǎn)(top,left=0 如上圖所示)，往下和右移動(dòng)父元素寬高的50%；如下圖所示：
圖二
再將子元素Child以parent中心點(diǎn)，往上和左移動(dòng)自身元素寬高的50%，就垂直居中啦，如下圖所示：
圖三
好了，這個(gè)流程我們是理清楚了，那用CSS應(yīng)該怎么實(shí)現(xiàn)呢？
列舉2個(gè):
（1）、 margin + absolute
設(shè)置child為absolute，將其top、right皆為50%，那么就使得子元素層顯上圖圖二的情況；
再將元素的margin-top，margin-right設(shè)置為-50%，那么就可以實(shí)現(xiàn)垂直居中啦。
示例代碼如下：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
View Code
注：margin的百分比值參照其包含塊的寬度進(jìn)行計(jì)算的。
另外默認(rèn)瀏覽器一般默認(rèn)writing-mode:horizontal-tb和direction:ltr，即橫向排版，所以margin無(wú)論寬高設(shè)置百分比時(shí)，都會(huì)以父元素的width進(jìn)行計(jì)算。縱向嘛就是以父元素的height進(jìn)行計(jì)算咯。
PS:如果你想縱向排版可以這么設(shè)置
#demo{
/*for browsers of wekit engine*/
-webkit-writing-mode: vertical-rl ；
/*for ie*/
writing-mode: tb-rl;
}
所以方法二中用margin+absolute讓子元素居中時(shí)，margin必須要知道子元素的寬高，切忌不能用百分比。
（2）、 translate + absolute
設(shè)置child為absolute，將其top、right皆為50%，那么就使得子元素層顯上圖圖二的情況；
再通過(guò)translate將元素移動(dòng)50%,50%，也可以得到圖三，實(shí)現(xiàn)垂直居中。
示例代碼如下：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.parent {
width:50%;
height:100px;
border:1px solid black;
position:relative;
}
.child {
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
<!--漸進(jìn)增強(qiáng)-->
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background:#22B14C;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
View Code
| 方法三： |
利用table-cell屬性就可以輕松實(shí)現(xiàn)。
將父元素變?yōu)閠able-cell，從而可以使用table的屬性vertical-align:middle，使元素垂直居中，再將子元素margin:0 atuo;就可以實(shí)現(xiàn)水平居中咯。
PS：table-cell必須包含在display:table元素中，table-cell是屬于table滴嘛。
示例代碼如下：
<!DOCTYPE html>
<head>
<title>center</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.root {
width:50%;
height:100px;
border:1px solid black;
display:table;
}
.parent {
display:table-cell;
vertical-align:middle;
}
.child {
width:50px;
height:50px;
background:#22B14C;
margin:0 auto;
}
</style>
</head>
<body>
<div class="root">
<div class="parent">
<div class="child"></div>
</div>
</div>
</body>
</html>
View Code
好了，css之垂直水平居中就算完了(彈性布局Flex不在本篇討論范疇)。
晚安，everyone~
總結(jié)
以上是生活随笔為你收集整理的CSS之水平垂直居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 怎么做品牌运营？6种品牌运营的常见方式
- 下一篇： 紫光展锐移动平台完成 Android 1