我們使用css過程中會(huì)碰到各種居中的需求惋戏，比如水平居中茫打、垂直居中、水平屹耐、垂直同時(shí)居中少漆，而且同時(shí)會(huì)有各種各樣的前提條件臼膏，比如待居中元素高度已知、待居中元素高度未知示损、容器元素高度已知渗磅、容器元素高度未知等，現(xiàn)在總結(jié)下在各種前提條件下如何實(shí)現(xiàn)元素居中检访。注意始鱼，我們一般所說的居中是指的某個(gè)元素在包含塊內(nèi)的居中。
水平居中
行內(nèi)元素水平居中
行內(nèi)元素（包括行內(nèi)塊級(jí)元素（inline-block））水平居中很簡(jiǎn)單烛谊，使用text-align: center即可實(shí)現(xiàn)：
<div class="centered-text">
inline elements horizontally center
</div>
<div class="centered-text">
<a href="#0">One</a>
<a href="#0">Two</a>
<a href="#0">Three</a>
<a href="#0">Four</a>
</div>
body {
background-color: #f06d06;
margin: 0;
}
div.centered-text {
background-color: #fff;
text-align: center;
margin-top: 30px;
padding: 10px 0;
}
div.centered-text a {
text-decoration: none;
background-color: #333;
color: #fff;
border-radius: 5px;
padding: 2px 8px;
}
實(shí)現(xiàn)效果如下：
塊級(jí)元素水平居中
塊級(jí)元素水平居中實(shí)現(xiàn)起來也很簡(jiǎn)單风响，只需要將margin-left以及margin-right設(shè)置為auto即可嘉汰。不過有個(gè)前提條件就是需要設(shè)置witdh為一定寬度丹禀，否則塊級(jí)元素默認(rèn)寬度會(huì)占滿整個(gè)包含塊，這時(shí)居中也就無從談起了鞋怀。塊級(jí)元素水平居中實(shí)現(xiàn)如下：
<div class="container">
<div class="center">
I'm swf, I'm from China.
</div>
</div>
body {
margin: 0;
background-color: #f06d06;
}
div.container {
background-color: #000;
margin-top: 20px;
}
div.center {
width: 100px;
height: 50px;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
實(shí)現(xiàn)效果如下：
垂直居中
行內(nèi)元素垂直居中
如果包含塊是自然的被行內(nèi)元素的高度撐開的双泪，那么可以簡(jiǎn)單的設(shè)置包含塊的padding-top和padding-bottom相等來實(shí)現(xiàn)垂直居中，其他情況可以采用如下方式實(shí)現(xiàn)：
- 單行行內(nèi)元素垂直居中
單行行內(nèi)元素垂直居中實(shí)現(xiàn)起來比較簡(jiǎn)單密似，只需將包含塊的height和line-height屬性設(shè)置為相同值即可：
<div>
<a href="#0">We're</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</div>
body {
background-color: #df6d0f;
margin: 0;
}
div {
border: 1px solid #fff;
background-color: #000;
height: 100px;
line-height: 100px;
margin-top: 20px;
}
a {
text-decoration: none;
background-color: #fff;
color: #000;
}
實(shí)現(xiàn)效果如下：
- 多行行內(nèi)元素垂直居中
多行行內(nèi)元素垂直居中的實(shí)現(xiàn)方案可以利用table布局實(shí)現(xiàn)焙矛，該方法需要在將包含塊多包一層：
<div class="center-table">
<p>
<span>based on table layout.</span>
<br />
<span>based on table layout.</span>
</p>
</div>
body {
background-color: #df6d0f;
margin: 0;
}
div {
margin-top: 20px;
display: table;
width: 100%;
}
p {
background-color: #000;
height: 100px;
display: table-cell;
vertical-align: middle;
}
p span {
background-color: #fff;
}
實(shí)現(xiàn)效果如下：
塊級(jí)元素垂直居中
如果塊級(jí)元素的包含塊不作高度限制，可以簡(jiǎn)單的通過將padding-top與padding-bottom（或margin）設(shè)置為相等來實(shí)現(xiàn)塊級(jí)元素的垂直居中残腌；如果塊級(jí)元素的包含塊高度已限制為確定值村斟，那么可以采用如下方式實(shí)現(xiàn)，注意無論待垂直定位元素的高度是否已知這些方法均適用抛猫。
- 基于
position實(shí)現(xiàn)
將包含塊設(shè)置為position: relative蟆盹，待垂直居中的塊級(jí)元素設(shè)置為position: absolute，然后相對(duì)于包含塊來調(diào)整塊級(jí)元素垂直方向位置：
<div class="container">
<div class="block-box">
I'm a block-level element with an known or unknown height, centered vertically within my parent.
</div>
</div>
body {
background-color: #df6d0f;
margin: 0;
}
div.container {
height: 100px;
background-color: #000;
margin-top: 20px;
position: relative;
}
div.block-box {
background-color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
實(shí)現(xiàn)效果如下：
- 基于
flexbox實(shí)現(xiàn)
縱向進(jìn)行flexbox布局即可：
<div class="container">
<div class="block-box">
I'm a block-level element with an known or unknown height, centered vertically within my parent.
</div>
</div>
body {
background-color: #df6d0f;
margin: 0;
}
div.container {
height: 100px;
background-color: #000;
margin-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
div.block-box {
background-color: #fff;
}
實(shí)現(xiàn)效果與基于position實(shí)現(xiàn)相同闺金。
塊級(jí)元素水平逾滥、垂直同時(shí)居中
如果要求塊級(jí)元素同時(shí)實(shí)現(xiàn)水平、垂直居中败匹，可采用與前面垂直居中相同的思路來實(shí)現(xiàn)寨昙。當(dāng)然讥巡，我們需要限制下元素的寬度，否則水平居中就無從談起舔哪。注意無論元素的高度是否已知這些方法均適用欢顷。
- 基于
position實(shí)現(xiàn)
<div class="container">
<div class="block-box">
I'm a block-level element with an known or unknown height, centered vertically within my parent.
</div>
</div>
body {
background-color: #df6d0f;
margin: 0;
}
div.container {
height: 100px;
background-color: #000;
margin-top: 20px;
position: relative;
}
div.block-box {
background-color: #fff;
position: absolute;
width: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
實(shí)現(xiàn)效果如下：
- 基于
flexbox實(shí)現(xiàn)
<div class="container">
<div class="block-box">
I'm a block-level element with an known or unknown height, centered vertically within my parent.
</div>
</div>
body {
background-color: #df6d0f;
margin: 0;
}
div.container {
height: 100px;
background-color: #000;
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
div.block-box {
background-color: #fff;
width: 300px;
}
實(shí)現(xiàn)效果與基于position實(shí)現(xiàn)相同捉蚤。
引用鏈接
本篇總結(jié)主要參考了如下文章：
