1.行内元素
要实现行内元素（<span>、<a>等）的水平居中，只需把行内元素包裹在块级父层元素（<div>、<li>、<p>等）中，并且在父层元素CSS设置如下：
#container{
text-align:center;
}
示例：
//HTML
<div id='container'>
<span id = 'center'>#center</span>
</div>
//CSS
#container{
text-align:center;
background-color:pink;
}
#center{
color:#fff;
font-size:20px;
}
并且适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。
//HTML
<div id='container'>
<div id="center"></div>
</div>
//CSS
#container{
text-align:center;
}
#center{
width:100px;
height:100px;
display:inline-block;
background-color:pink;
}
2.块状元素的水平居中
要实现块状元素（display:block）的水平居中，我们只需要将它的左右外边距margin-left和margin-right设置为auto，即可实现块状元素的居中，要水平居中的块状元素CSS设置如下：
#center{
margin:0 auto;
}
示例：
//HTML
<div id="center"></div>
//CSS
#center{
width:100px;
height:100px;
background-color:pink;
margin:0 auto;
}
3.多个块状元素的水平居中
- 将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
//HTML
<div id="center">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
//CSS
#center{
text-align:center;
}
.item{
width:50px;
height:50px;
display:inline-block;
background:pink;
}
- 使用flex实现多个块状元素的水平居中
只需修改父容器的css为下面的属性即可：
#center{
display:flex;
justify-content:center;
}
