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;
}
原文：http://www.cnblogs.com/ntscshen/p/4687909.html