CSS 的居中問題是一個經(jīng)常被抱怨的東西上荡。為啥居個中要這么麻煩饱溢？我覺得可能問題不在于難，而在于每次一查萍启，有各種各樣的解決方案，你選了一個驳遵，能正常地居中了超埋，但是心里又會在想：選這個是不是最好的呢霍殴？會不會有什么問題来庭？
各種猶豫不決月弛？那就來創(chuàng)建一個決策樹吧帽衙！
水平居中
是inline元素或者inline-*元素嗎厉萝？（比如text或者links）章母？
給inline元素一個block的父元素乳怎，然后設(shè)置父元素css為text-align:center 即可搞定。
.center-children {
text-align: center;
}
是block塊元素嗎询枚？
把一個塊級元素的margin-left和margin-right設(shè)置成auto,再給定一個固定的width，即可水平居中。一般我們會寫成：margin:0 auto;
.center-me {
margin: 0 auto;
}
有多個block塊級元素的話苗傅，怎么居中渣慕？
如果你想在一行里讓多個塊級元素居中逊桦，你可以把這些塊級元素的display設(shè)置成inline-block(同時注意設(shè)置這些元素的父級元素text-align:center)强经，或者使用flexbox.
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
如果使用flexbox,直接對父元素做如下設(shè)置即可：
.flex-center {
display: flex;
justify-content: center;
}
垂直居中
是inline元素或者inline-元素嗎兰迫？（比如text或者links）汁果？
單行据德？
1.設(shè)置相同的padding-top和padding-bottom.
2.如果1不能使用，可以嘗試將元素的line-height和height設(shè)置成相等的值赡译。
.link {
padding-top: 30px;
padding-bottom: 30px;
}
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行？
設(shè)置相同的padding-top和padding-bottom.
如果1不能使用只洒，也許text所在的元素是一個table cell,可以使用 vertical-align來處理毕谴。也可以使用flexbox.
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
是block塊元素嗎？
知道元素的高度舀武。 如果你知道元素的高度瘪匿，那么像下面這樣就可以：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; / account for padding and border if not using box-sizing: border-box; */
}
不知道元素的高度。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
你可以使用flexbox嗎？
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平垂直居中
一般結(jié)合上面兩個技巧就可以做到水平和垂直居中。不過也可以分成下面這三個陣營：
元素有固定的寬度和高度(設(shè)置absolute仁锯，50%蓄愁，50%的值配合使用負的長度和寬度值可以很好地得到跨瀏覽器的支持)
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
元素沒有固定的寬度和高度(在top和left上同時使用transform屬性和負的translate百分數(shù)撮抓，注意這里的百分數(shù)是基于當(dāng)前元素的)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
可以使用flexbox嗎妇斤？注意兩個方向上都要設(shè)置center
.parent {
display: flex;
justify-content: center;
align-items: center;
}
