水平居中
1.行內(nèi)或者具有行內(nèi)元素性質(zhì)的元素（比如文字或者鏈接）
父元素為塊級元素娜扇，子元素為行內(nèi)或者具有行內(nèi)元素性質(zhì)的元素，可以使用text-align: center;
2.單個(gè)塊級元素
設(shè)置塊級元素的 margin-left 和 margin-right 為 auto 來使它水平居中（width 屬性必須被設(shè)置蔗牡，否則它會占滿寬度）。代碼：
margin: 0 auto;
垂直居中
1.行內(nèi)或者具有行內(nèi)元素性質(zhì)的元素（比如文字或者鏈接）
單行
我們可以設(shè)置上下內(nèi)邊距padding相同，或者line-height和height的值相等。
多行
-父元素高度確定的單行文本（內(nèi)聯(lián)元素） 設(shè)置 height = line-height欠雌；
-父元素高度確定的多行文本（內(nèi)聯(lián)元素）a:插入 table （插入方法和水平居中一樣），然后設(shè)置vertical-align:middle疙筹；b:先設(shè)置 display:table-cell 再設(shè)置 vertical-align:middle富俄；
2.塊級元素
2.1知道塊級元素的高度
.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; */
}
2.2元素高度未知
可以通過 transform 來達(dá)到目的：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
垂直水平居中
3.1元素有固定的寬和高
用負(fù)的 margin 值使其等于寬度和高度的一半，當(dāng)你設(shè)置了它的絕對位置為 50% 之后而咆，就會得到一個(gè)跨瀏覽器支持的居中:
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
3.2元素的寬和高未知
如果不知道元素的高度和寬度霍比，可以用 transform 屬性，用 translate 設(shè)置 -50%（它以元素當(dāng)前的寬和高為基礎(chǔ)）來居中:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
