CSS实现居中的方式

1、text-align:center; 使行内元素水平居中(文本、图片img、span、a、i、input、em、b) IE6、7、8怪异模式下可以使快级元素居中

2、margin:0 auto;元素水平居中、作用域快级元素

3、translate居中;IE9以下无效(移动端) 外部容器需要设置高度

img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:auto;
}

3-1、absolute居中PC

img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
height:auto;
}

4、不确定宽度水平居中

.parent{
float:left;
position:relative;
left:50%;
}
.son{
position:absolute;
left:-50%;
}

5、absolute居中(外部文件必须什么高度)

<div class="box">
    <div class="div1"></div>
</div>

.box{
position:relative;
background-color:red;
}
.div1{
position:absolute;
top:0; right:0; bottom:0; left:0;
margin:auto;
overflow:auto;
height:auto;
}

6、flexbox居中(未来居中的首选方案)

    .flexCenter{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;

      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      flex-direction: row;

      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;

      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
    }

7、display:table-cell;(额外添加一个无用标签) 这个方法兼容最好、貌似又回到了table的年代

<div class="table">
    <div class="table-cell"></div>
</div>

.table{
width:100%;
display:table;
background-color:red;
}
.table-cell{
display:table-cell;
text-align:center;
vertical-align:middle;
}