CSS居中完全解决方案

水平居中

行内元素

把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式

a{
text-align:center;
}

块级元素

对于定宽的块级元素，我们要设置起margin-top,margin-right为auto

.center{
margin:0auto;
}

多个块级元素(inline-block)

多个块级元素，我们将其display设置为inline-block；然后将父级元素设置一下属性

div{
text-align:center;
}

多个块级元素(flex)

设置需要水平居中的块状元素的父元素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;
}

未知高度的块级元素

使用CSStranslate,将块级元素设置绝对定位，top为50%，transform:translateY(-50%);

div{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-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)

给父级使用flex布局

div{
display:flex;
justify-content:center;
align-items:center;
}

未知高度、宽度的元素

使用CSStranslate

div{
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}