我们使用css过程中会碰到各种居中的需求，比如水平居中、垂直居中、水平、垂直同时居中，而且同时会有各种各样的前提条件，比如待居中元素高度已知、待居中元素高度未知、容器元素高度已知、容器元素高度未知等，现在总结下在各种前提条件下如何实现元素居中。注意，我们一般所说的居中是指的某个元素在包含块内的居中。
水平居中
行内元素水平居中
行内元素（包括行内块级元素（inline-block））水平居中很简单，使用text-align: center即可实现：
<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;
}
实现效果如下：
行内元素水平居中
块级元素水平居中
块级元素水平居中实现起来也很简单，只需要将margin-left以及margin-right设置为auto即可。不过有个前提条件就是需要设置witdh为一定宽度，否则块级元素默认宽度会占满整个包含块，这时居中也就无从谈起了。块级元素水平居中实现如下：
<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;
}
实现效果如下：
块级元素水平居中
垂直居中
行内元素垂直居中
如果包含块是自然的被行内元素的高度撑开的，那么可以简单的设置包含块的padding-top和padding-bottom相等来实现垂直居中，其他情况可以采用如下方式实现：
- 单行行内元素垂直居中
单行行内元素垂直居中实现起来比较简单，只需将包含块的height和line-height属性设置为相同值即可：
<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;
}
实现效果如下：
单行行内元素垂直居中
- 多行行内元素垂直居中
多行行内元素垂直居中的实现方案可以利用table布局实现，该方法需要在将包含块多包一层：
<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;
}
实现效果如下：
多行行内元素垂直居中
块级元素垂直居中
如果块级元素的包含块不作高度限制，可以简单的通过将padding-top与padding-bottom（或margin）设置为相等来实现块级元素的垂直居中；如果块级元素的包含块高度已限制为确定值，那么可以采用如下方式实现，注意无论待垂直定位元素的高度是否已知这些方法均适用。
- 基于
position实现
将包含块设置为position: relative，待垂直居中的块级元素设置为position: absolute，然后相对于包含块来调整块级元素垂直方向位置：
<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%);
}
实现效果如下：
块级元素垂直居中
- 基于
flexbox实现
纵向进行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;
}
实现效果与基于position实现相同。
块级元素水平、垂直同时居中
如果要求块级元素同时实现水平、垂直居中，可采用与前面垂直居中相同的思路来实现。当然，我们需要限制下元素的宽度，否则水平居中就无从谈起。注意无论元素的高度是否已知这些方法均适用。
- 基于
position实现
<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%);
}
实现效果如下：
块级元素水平、垂直同时居中
- 基于
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;
justify-content: center;
align-items: center;
}
div.block-box {
background-color: #fff;
width: 300px;
}
实现效果与基于position实现相同。
引用链接
本篇总结主要参考了如下文章：
