元素水平居中

基本的规则–居中的参照物只有一个，就是爸爸。
既然说到居中，自然是相对于父级来居中的。
这一点务必弄清楚，居中不可能是相对于爷爷来居中的。
如果想相对于爷爷来居中，只能通过爸爸来相对于爷爷来居中。

居中的前提
要居中的元素的宽度没有超过父级的宽度。

居中的两种情况

居中分为两种，内联元素居中/块儿元素居中

内联元素居中 – 给父级设置属性
重要的事情说三遍，是给父级，给父级，给父级！

内联元素（常用内联元素有三种：span、a、img）居中，给父级添加text-align:center属性即可 。

        <div class="text-center">
             <span class="inline-block">我是内联元素</span>
         </div>

         <div class="text-center">
             <a href="" class="inline-block">我是内联元素</a>
         </div>

         <div class="text-center">
             <img src="" alt="我是内联元素"/>
         </div>

块儿元素居中 – 给自身设置属性
重要的事情说三遍，是给自己，给自己，给自己！

块儿元素居中，给自身设置宽度+margin两个属性即可居中。

.block{
    width:200px ; //这个宽度不能大于父级的宽度
    margin-left:auto ;
    margin-right:auto ;
}

.father{
    width:300px;
}

<div class="father">
      <div class="block">我是块儿元素</div>
</div>

其他的居中方法
该方法过于粗暴，不限制是爸爸还是爷爷，不限制是否大于父级的宽度，不限制是内联还是块儿元素。需要达到小学数学的学历水平方可使用。

使用定位：

<div class="father">
     <div class="chlid">我是块儿元素或者内联元素都行</div>
</div>

.father{
    position:relative ;
}

.child{
    width:200px ; //如果不定义宽度，那么请审查元素明确知道自身的宽度。
    position:absolute ;
    left: 50% ;
    margin-left:-100px ; //自身宽度的一半
}

使用定位的方法来居中，只需要知道元素自身的宽度，然后找好参照物即可。但是……这种方法……父级或者说参照物是无法被这个元素撑起来的，因为定位了就不再占用空间。