上次面试面试官问到了，问了个定宽局中和不定宽局中，下来我把所有有关CSS居中都总结了一下
原文摘自我的前端博客，欢迎大家来访问
把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式
a{
text-align: center;
}对于定宽的块级元素，我们要设置起margin-top,margin-right 为auto
.center{
margin: 0 auto;
}多个块级元素，我们将其display设置为inline-block；然后将父级元素设置一下属性
div{
text-align: center;
}设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可
body{
display: flex;
justify-content: center;
}将行内元素的height和line-height设置为一致即可
a{
height: 200px;
line-height:200px;
}如果行内元素文字过多产生多行，则在父级元素设置display: table-cell;vertical-align:middle;
.container{
width: 300px;
height: 300px;
display: table-cell;
vertical-align:middle;
}将块级元素设置绝对定位，top为50%，margin-top:-height/2
div{
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
padding:0;
}使用CSS translate,将块级元素设置绝对定位，top为50%，transform: translateY(-50%);
div{
position: absolute;
top: 50%;
transform: translateY(-50%);
padding:0;
}将块级元素设置绝对定位，top为50%，left:50%;margin-top:-height/2;margin-left:-width/2
div{
width: 150px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}给父级使用flex布局
div{
display: flex;
justify-content:center;
align-items: center;
}使用CSS translate
div{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}原文：http://www.cnblogs.com/hacke2/p/4002745.html