居中一直是CSS中被抱怨的典型。為什么實(shí)現(xiàn)起來(lái)這么辛苦？所以有人被嘲笑。我覺(jué)得問(wèn)題不是沒(méi)有辦法做到，只是視情況而定，有很多不同方式，但是很難弄清楚應(yīng)該用何種方式。
因此我寫(xiě)了這篇文章，希望能把他變得容易點(diǎn)。
水平居中
內(nèi)聯(lián)元素（inline or inline-*）居中?
你可以讓他相對(duì)父級(jí)塊級(jí)元素居中對(duì)齊
.center-children {
text-align: center;
}
塊級(jí)元素（block level）居中?
你可以通過(guò)設(shè)置margin-left和margin-right為auto讓它居中（同時(shí)還要設(shè)置width，否則它就會(huì)承滿整個(gè)容器，無(wú)法看出居中效果），如。
.center-me {
margin: 0 auto;
}
如果有很多塊級(jí)元素呢？
如果你有很勻塊級(jí)元素需要水平居中成一行，你最好使用一個(gè)不同的display類(lèi)型。這是一個(gè)使用inline-block和flex的例子。
I'm an element that is block-like with my siblings and we're centered in a row.
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
I'm an element that is block-like with my siblings and we're centered in a row.
I'm an element that is block-like with my siblings and we're centered in a row.
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
I'm an element that is block-like with my siblings and we're centered in a row.
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
垂直居中
垂直居中在CSS中有點(diǎn)棘手
內(nèi)聯(lián)元素（inline or inline-*）居中，像文本和鏈接那樣的？
它是一行的嗎？
有時(shí)侯元素可以表現(xiàn)像垂直居中，只是因?yàn)樗鼈冇邢嗟鹊纳舷聀adding
.link {
padding-top: 30px;
padding-bottom: 30px;
}
如果padding因?yàn)槟承┰虿荒苡茫椅谋静粫?huì)換行的情況下，你可以使用line-height，讓其與height相等去對(duì)齊文本。
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
它是多行的？
上下等padding的方式也可以讓多行居中，但是如果這方法沒(méi)用，你可以讓這些文字的容器按table cell模式顯示，然后設(shè)置文字的vertical-align屬性對(duì)齊，就像talbe那樣
I'm vertically centered multiple lines of text in a real table cell.
I'm vertically centered multiple lines of text in a CSS-created table layout.
body {
background: #f06d06;
font-size: 80%;
}
table {
background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}
table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* default is vertical-align: middle; */
}
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
塊級(jí)元素（block level）垂直居中?
你知道元素的高度嗎？
出于很多方面的原因，不知道網(wǎng)頁(yè)布局的高度是相當(dāng)普遍的。
但是如果你的布局有一個(gè)固定高度，你就可以這樣垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* 如果沒(méi)有使用: border-box; 的盒子模型則需要設(shè)置這個(gè) */
}
元素的高度是未知的
盡管未知，但你仍有可能向上推移50%的寬度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
你可以使用flexbox嗎？
這并不奇怪，使用flexbox會(huì)容易非常多
I'm a block-level element with an unknown height, centered vertically within my parent.
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
height: 300px;
width: 200px;
padding: 20px;
margin: 20px;
display: flex;
flex-direction: column;
justify-content: center;
resize: vertical;
overflow: auto;
}
main div {
background: black;
color: white;
padding: 20px;
resize: vertical;
overflow: auto;
}
同時(shí)水平和垂直居中
元素有固定的寬度和高度
如果元素的寬度和高度是固定的，你需要先絕對(duì)居中，然后上移和左移50%的寬度即可，這種方案有極好的跨瀏覽器支持。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
元素的寬度高度未知
如果你不知道高度和寬度（可變的），你可以使用transofrm屬性在兩個(gè)方向都平移負(fù)50%
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
