水平居中

行內(nèi)元素

把行內(nèi)元素嵌套在一個(gè)DIV中，并且在DIV中設(shè)置以下樣式

div {
text-align: center;
}

塊級(jí)元素

對(duì)于定寬的塊級(jí)元素，我們要設(shè)置起margin-top,margin-right 為auto

div {
margin: 0 auto;
}

多個(gè)塊級(jí)元素(inline-block)

多個(gè)塊級(jí)元素，我們將其display設(shè)置為inline-block；然后將父級(jí)元素設(shè)置一下屬性

ul {
text-align: center;
}
ul li {
display: inline-block;
}

多個(gè)塊級(jí)元素(flex)

設(shè)置需要水平居中的塊狀元素的父元素display為flex ，并且justify-content屬性為center即可

ul {
display: flex;
justify-content: center;
}
ul li {
}

垂直居中

單行行內(nèi)元素

將行內(nèi)元素的height和line-height設(shè)置為一致即可

div {
height: 200px;
line-height: 200px;
}

多行行內(nèi)元素

如果行內(nèi)元素文字過多產(chǎn)生多行，則在父級(jí)元素設(shè)置display: table-cell;vertical-align:middle;

div {
width: 300px;
height: 300px;
display: table-cell;
vertical-align: middle;
}

已知高度的塊級(jí)元素

將塊級(jí)元素設(shè)置絕對(duì)定位，top為50%，margin-top:-height/2

div {
position: absolute;
height: 100px;
top: 50%;
margin-top: -50px;
padding: 0;
}

未知高度的塊級(jí)元素

使用CSS translate,將塊級(jí)元素設(shè)置絕對(duì)定位，top為50%，transform: translateY(-50%);

div{
position: absolute;
top: 50%;
padding: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
}

水平垂直居中

已知高度、寬度的元素

將塊級(jí)元素設(shè)置絕對(duì)定位，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)

給父級(jí)使用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%);
}

小結(jié)

CSS設(shè)置居中是我們經(jīng)常遇到的，本文總結(jié)了遇到的各種居中情況，并提供了一種設(shè)置方式，有的情況使用flex（兼容ie10+），有的使用了transform（兼容ie9+），如果你有更多的方法，歡迎在下方留言。