以下內(nèi)容來(lái)自： https://segmentfault.com/a/1190000014048464
對(duì)css居中一直有些拙計(jì)，但web-kit-box和flex-box兼容性有問(wèn)題触菜，看到這篇就迫不及待收藏了九榔。
css中有好多實(shí)現(xiàn)居中的方式，在項(xiàng)目中經(jīng)常不知道使用哪種方式會(huì)比較好涡相，所以記錄下來(lái)哲泊。
水平垂直居中包括行內(nèi)元素居中，以及塊級(jí)元素居中
行內(nèi)元素html結(jié)構(gòu)
<div class="outer">
<span class="inner"></span>
</div>
塊級(jí)元素結(jié)構(gòu)
<div class="outer">
<div class="inner"></div>
</div>
基礎(chǔ)樣式
<style>
.outer {
width: 400px;
height: 400px;
border: 1px solid red;
}
.outer .inner {
width: 50px;
height: 50px;
border: 1px solid blue;
}
</style>
水平居中
1-行內(nèi)元素（最簡(jiǎn)單 text-align: center）
.outer {
text-align: center;
}
1-塊級(jí)元素（margin: auto）
當(dāng)使用這種方式時(shí)催蝗，內(nèi)部元素必須定義寬度切威，不然margin屬性會(huì)無(wú)效
.outer .inner {
margin: auto;
}
2-塊級(jí)元素（margin: auto + display: table）
前面這種方式需要為內(nèi)部元素定義寬度，如果不想定義寬度丙号，可以設(shè)置內(nèi)部元素的display 為 table先朦，它的寬度會(huì)由內(nèi)部元素來(lái)?yè)伍_(kāi)。
.outer .inner {
margin: auto;
display: table;
}
3-塊級(jí)元素（display: inline）
為內(nèi)部元素設(shè)置display 為inline槽袄，將它轉(zhuǎn)換為行內(nèi)元素烙无，再對(duì)父元素使用text-align: center 可以實(shí)現(xiàn)水平居中锋谐，缺點(diǎn)就是內(nèi)部元素?zé)o法設(shè)置寬度遍尺。
.outer {
text-align: center;
}
.outer .inner {
display: inline;
}
4-塊級(jí)元素（display: inline-block）
方案三無(wú)法為內(nèi)部元素設(shè)置寬度，但是采用inline-block涮拗，則可以為內(nèi)部元素設(shè)置寬度乾戏。
.outer {
text-align: center;
}
.outer .inner {
display: inline-block;
}
5-塊級(jí)元素（float: left + transform）
這種方式不需要知道內(nèi)部元素寬度爷辱。
.outer .inner {
position: relative;
left: 50%;
transform: translateX(-50%);
}
6-塊級(jí)元素（負(fù)邊距+絕對(duì)定位）
.outer {
position: relative;
}
.outer .inner {
position: absolute;
left: 50%;
margin-left: -25px;
}
7-塊級(jí)元素（flexbox）
用的最多的方式稽莉，但低版本瀏覽器會(huì)有兼容問(wèn)題
.outer {
display: flex;
justify-content: center; // 主軸上居中
}
垂直居中
1-行內(nèi)元素（line-height）
外部元素設(shè)置line-height
.outer {
line-height: 400px;
}
1-塊級(jí)元素（absolute + top + margin-top）
使用絕對(duì)定位將內(nèi)部元素的頂部定位在中間彬檀，再通過(guò)margin-top 負(fù)值拉回高度霍骄，需要提前知道內(nèi)部元素的高度
.outer {
position: relative;
}
.outer .inner {
position: absolute;
top: 50%;
margin-top: -25px;
}
2-塊級(jí)元素（absolute + margin:auto）
這種方式不需要知道內(nèi)部元素的高度趁窃，兼容性也很好
.outer {
position: relative;
}
.outer .inner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3-塊級(jí)元素（relative + transform）
前面水平居中的時(shí)候也出現(xiàn)過(guò)這種方式盆佣，也可以使用position: absolute方式隶糕，但要對(duì)應(yīng)地將外部元素設(shè)置成position: relative
.outer .inner {
position: relative;
top: 50%;
transform: translateY(-50%);
}
4-塊級(jí)元素（vertical-align + table-cell）
.outer {
display: table-cell;
vertical-align: middle;
}
5-塊級(jí)元素（vertical-align + inline-block）
原理是新建一個(gè)inner的兄弟元素尚揣，高度撐開(kāi)整個(gè)容器抑堡，再對(duì)inner使用vertical-align: middle 使元素居中摆出，不需要知道內(nèi)部元素的高度
html結(jié)構(gòu)
<div class="outer">
<div class="inner"></div>
<div class="sibling"></div>
</div>
.outer .inner {
vertical-align: middle;
display: inline-block;
}
.outer .slibing {
height: 400px;
display: inline-block;
vertical-align: middle;
}
5-塊級(jí)元素（偽元素）
原理和上面的方式一樣，只是通過(guò)偽元素去撐開(kāi)高度
.inner {
display: inline-block;
vertical-align: middle;
}
.outer::before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
6-塊級(jí)元素（flexbox）
.outer {
display: flex;
align=items: center;
}
