水平居中
行内元素
把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式
div {
text-align: center;
}
块级元素
对于定宽的块级元素，我们要设置起margin-top,margin-right 为auto
div {
margin: 0 auto;
}
多个块级元素(inline-block)
多个块级元素，我们将其display设置为inline-block；然后将父级元素设置一下属性
ul {
text-align: center;
}
ul li {
display: inline-block;
}
多个块级元素(flex)
设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可
ul {
display: flex;
justify-content: center;
}
ul li {
}
垂直居中
单行行内元素
将行内元素的height和line-height设置为一致即可
div {
height: 200px;
line-height: 200px;
}
多行行内元素
如果行内元素文字过多产生多行，则在父级元素设置display: table-cell;vertical-align:middle;
div {
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
}
已知高度的块级元素
将块级元素设置绝对定位，top为50%，margin-top:-height/2
div {
position: absolute;
height: 100px;
top: 50%;
margin-top: -50px;
padding: 0;
}
未知高度的块级元素
使用CSS translate,将块级元素设置绝对定位，top为50%，transform: translateY(-50%);
div{
position: absolute;
top: 50%;
padding: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}
水平垂直居中
已知高度、宽度的元素
将块级元素设置绝对定位，top为50%，left:50%;margin-top:-height/2;margin-left:-width/2
div{
position: absolute;
width: 150px;
height: 150px;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
}
已知高度、宽度的元素(flex)
给父级使用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%);
}
小结
CSS设置居中是我们经常遇到的，本文总结了遇到的各种居中情况，并提供了一种设置方式，有的情况使用flex（兼容ie10+），有的使用了transform（兼容ie9+），如果你有更多的方法，欢迎在下方留言。
