水平居中

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;
}