學(xué)會(huì)這幾種方法，css居中其實(shí)很簡(jiǎn)單

們?cè)谑褂胏ss來(lái)布局時(shí)經(jīng)常需要進(jìn)行居中，有時(shí)一個(gè)屬性就能搞定，有時(shí)則需要一定的技巧才能兼容到所有瀏覽器，利用css來(lái)實(shí)現(xiàn)對(duì)象的垂直居中有許多不同的方法，比較難的是應(yīng)該選擇哪種正確的方法。比如我們都知道 margin:0 auto;的樣式能讓元素水平居中，而margin: auto;卻不能做到垂直居中……下面就css居中的一些常用方法做個(gè)集中的介紹。

首先是水平居中，最簡(jiǎn)單的辦法當(dāng)然就是：

margin:0 auto;

文字的水平居中方法：

利用line-height設(shè)為height的一樣即可：

eg:

.div {
width：200px；
height: 200px;
line-height: 200px;/*實(shí)現(xiàn)垂直居中的關(guān)鍵*/
text-align:center;
font-size: 36px;
background-color: #ccc;
}

絕對(duì)定位居中

父容器元素：position: relative，子元素：position:absolute;

eg:

<div class="box">
<div class="content"></div>
</div>
<style>
.box{position:relative;width:200px;height:200px;background:#999;}
.content{
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:#C9F;}
</style>

效果如下所示：

！注意：高度必須定義，建議加 overflow: auto，防止內(nèi)容溢出。

flex居中

介紹一下CSS3中的display:flex來(lái)實(shí)現(xiàn)的水平垂直居中的方法。

eg：

<div class="parent">
<div class="children">我是通過(guò)flex的水平垂直居中噢！</div>
</div>
<style>
.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:200px;
height:200px;
background-color:green;
}
.children {
background-color:blue;
color:#FFF;
}
</style>

效果如下所示：

這種方式最為簡(jiǎn)便，就是兼容性不好，不過(guò)隨著時(shí)間的前進(jìn)，各大瀏覽器一定會(huì)都兼容的。

里是工作狂的聚集地
職場(chǎng)	學(xué)術(shù)	新媒體	設(shè)計(jì)	極客

專門治愈處女座強(qiáng)迫癥。

本文為CSS入門

翻譯 redman9

原載CSS-Trick

人們經(jīng)常抱怨在 CSS 中居中元素的問(wèn)題，其實(shí)這個(gè)問(wèn)題并不復(fù)雜，只是因?yàn)榉椒ū姸啵枰鶕?jù)情況從眾多方法中選取一個(gè)出來(lái)。接下來(lái)，我們做一個(gè) "決定樹(shù)" 來(lái)幫我們把問(wèn)題變的簡(jiǎn)單一點(diǎn)。首先你需要居中：

—— 水平 ——

?需要居中inline或者inline-*元素（如文字或者鏈接）？

? 需要居中block類的元素？

? 需要居中多個(gè)block元素？

—— 垂直 ——

?需要居中inline或者inline-*元素（如文字或者鏈接）？

?需要居中block類的元素？

——既水平又垂直 ——

?固定寬高

?不固定寬高

?使用flexbox

● ● ●

水平居中

水平居中`inline`或者`inline-*`元素▼

你可以輕松的在一個(gè)block元素中水平居中一個(gè)inline元素，以下代碼對(duì)inline，inline-block，inline-table和inline-flex等有效。

.parent {
text-align: center;
}

水平居中`block`類的元素▼

在block元素被設(shè)定固定寬度的情況下，可以使用設(shè)置元素margin-left和margin-right的值為auto的方法實(shí)現(xiàn)水平居中。

.child {
width: 400px;
margin: 0 auto;
}

水平居中多個(gè)`block`類的元素▼

通過(guò)inline-block實(shí)現(xiàn)

.parent {
text-align: center;
}
.child {
display: inline-block;
text-align: left;
}

通過(guò)flexbox實(shí)現(xiàn)

.parent {
display: flex;
justify-content: center;
}

● ● ●

垂直居中

垂直居中`inline`或者`inline-*`元素▼

【單行】

`inline/text`元素可以簡(jiǎn)單的用設(shè)置相同的上下`padding`值達(dá)到垂直居中的目的。

.center {
pading-top: 30px; padding-bottom: 30px;
}

如果因?yàn)槟撤N原因不能使用padding的方法，你還可以設(shè)置line-height等于height來(lái)達(dá)到目的。

.center {
height: 100px; line-height: 100px; white-space: nowrap;
}

【多行】

相同的上下padding也可以適用于此種情況，如果不能生效，你可以嘗試將該元素的父元素的display設(shè)置為table，同時(shí)該元素的display設(shè)置為table-sell，然后設(shè)置vertical-align。

.parent {
display: table;
width: 200px; height: 400px;
} .child {
display: table-cell;
vertical-align: middle;
}

如果上述方法不能使用，你可以嘗試使用flexbox,一個(gè)單獨(dú)的flexbox子元素可以輕易的在其父元素中居中。謹(jǐn)記，這種方法需要父元素有固定的高度。

.parent {
display: flex; justify-content: center;
flex-direction: column; height: 400px;
}

如果上述兩種方式均不能使用，你可以使用“幽靈元素”技術(shù)，這種方法采用偽元素::before撐開(kāi)高度，文字垂直居中。

.parent {
position: relative;
} .parent::before {
content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;
} .child {
display: inline-block;
vertical-align: middle; }

垂直居中block類的元素▼

【已知元素高度】

.parent { 
position: relative; } .child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

【未知元素高度】

.parent {
position: relative; } .child {
position: absolute;
top: 50%;
transform: translateY(-50%); }

【使用flexbox】

.parent {
display: flex;
flex-direction: column;
justify-content: center; }

● ● ●

既水平又垂直

【固定寬高】

.parent {
position: relative; } .child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px; }

【不固定寬高】

.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); }

【使用flexbox】

.parent { display: flex; justify-content: center; align-items:center; }

<div id="parent">
<!-- 定義子級(jí)元素 -->
<div id="child">居中布局</div>
</div>

過(guò)以下CSS樣式代碼實(shí)現(xiàn)水平方向居中布局效果

.parent{position:relative;}
.child{position:absolute;left:50%;transform: translateX(-50%)}

優(yōu)點(diǎn):

父級(jí)元素是否脫離文檔流, 不影響子集元素水平居中效果

缺點(diǎn):transform屬性是CSS3中新增屬性, 瀏覽器支持情況不好

在線咨詢

上一篇：前端性能優(yōu)化(三)-瀏覽器九大緩存方法
下一篇：JavaScript 箭頭函數(shù)特點(diǎn)與用法詳解

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

學(xué)會(huì)這幾種方法，css居中其實(shí)很簡(jiǎn)單

文字的水平居中方法：

絕對(duì)定位居中

flex居中

水平居中inline或者inline-*元素▼

水平居中block類的元素▼

水平居中多個(gè)block類的元素▼

垂直居中

垂直居中inline或者inline-*元素▼

【單行】

inline/text元素可以簡(jiǎn)單的用設(shè)置相同的上下padding值達(dá)到垂直居中的目的。

既水平又垂直

【固定寬高】

【不固定寬高】

您的項(xiàng)目需求

水平居中`inline`或者`inline-*`元素▼

水平居中`block`類的元素▼

水平居中多個(gè)`block`類的元素▼

垂直居中`inline`或者`inline-*`元素▼

`inline/text`元素可以簡(jiǎn)單的用設(shè)置相同的上下`padding`值達(dá)到垂直居中的目的。