水平居中
行內(nèi)或類行內(nèi)元素
在塊級(jí)父容器中讓行內(nèi)元素居中疟羹，只需使用 text-align: center; ：
這種方法可以讓 inline / inline-block / inline-table / inline / flex 等類型的元素實(shí)現(xiàn)居中榄融。
塊級(jí)元素
讓塊級(jí)元素居中的方法就是設(shè)置 margin-left 和 margin-right 為 auto （前提是已經(jīng)為元素設(shè)置了適當(dāng)?shù)?width 寬度救湖，否則塊級(jí)元素的寬度會(huì)被拉伸為父級(jí)容器的寬度）。常見用法如下所示：
.center-me {
margin: 0 auto;
}
無論父級(jí)容器和塊級(jí)元素的寬度如何變化力九，都不會(huì)影響塊級(jí)元素的居中效果邑闺。
多個(gè)塊級(jí)元素
如果要讓多個(gè)塊級(jí)元素在同一水平線上居中，那么可以修改它們的 display 值抵乓。這里有兩個(gè)示例，其中一個(gè)使用了 inline-block 的顯示方式灾炭，另一個(gè)使用了 flexbox 的顯示方式：
如果你想讓多個(gè)垂直堆棧的塊元素，那么仍然可以通過設(shè)置 margin-left 和 margin-right 為auto 來實(shí)現(xiàn)。
垂直居中
行內(nèi)或類行內(nèi)元素
單行
對(duì)于單行行內(nèi)或者文本元素掏缎，只需為它們添加等值的 padding-top 和 padding-bottom 就可以實(shí)現(xiàn)垂直居中：
.link {
padding-top: 30px;
padding-bottom: 30px;
}
如果因?yàn)槟承┰蛭覀儾荒苁褂?padding 屬性來實(shí)現(xiàn)垂直居中煤杀，而且已知文本不會(huì)換行，那么就可以讓 line-height 和 center 相等酌儒，從而實(shí)現(xiàn)垂直居中：
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
多行
對(duì)于多行文本枯途，同樣可以使用等值 padding-top 和 padding-bottom 的方式實(shí)現(xiàn)垂直居中。如果你在使用過程中發(fā)現(xiàn)這種方法沒見效榴啸，那么你可以通過 CSS 為文本設(shè)置一個(gè)類似 table-cell的父級(jí)容器晚岭，然后使用 vertical-align 屬性實(shí)現(xiàn)垂直居中。
此外坦报，還可以使用 flexbox 實(shí)現(xiàn)垂直居中片择，對(duì)于父級(jí)容器為 display: flex 的元素來說，它的每一個(gè)子元素都是垂直居中的
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
值得注意的是构回，上述方法只適用于父級(jí)容器擁有確定高度的元素纤掸。
如果上述方法都不起作用，那么你就需要使用被稱為 幽靈元素（ghost element） 的非常規(guī)解決方式：在垂直居中的元素上添加偽元素借跪，設(shè)置偽元素的高等于父級(jí)容器的高，然后為文本添加vertical-align: center; 樣式歇由，即可實(shí)現(xiàn)垂直居中。
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
塊級(jí)元素
已知元素的高度
無法獲知元素的具體高度是非常常見的一種狀況糊昙，比如：視區(qū)寬度變化谢谦，會(huì)觸發(fā)布局重繪，從而改變高度没咙；對(duì)文本施加不同的樣式會(huì)改變高度千劈；文本的內(nèi)容量不同會(huì)改變高度；當(dāng)寬度變化時(shí)墙牌，對(duì)于寬高比例固定的元素（比如圖片）喜滨，也會(huì)自動(dòng)調(diào)整高度……
如果我們知道元素的高度，可以這樣來實(shí)現(xiàn)垂直居中：
.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; */
}
未知元素的高度
如果我們不知道元素的高度鸿市，那么就需要先將元素定位到容器的中心位置焰情，然后使用 transform 的 translate 屬性，將元素的中心和父容器的中心重合内舟，從而實(shí)現(xiàn)垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
flexbox
使用 flexbox 實(shí)現(xiàn)垂直居中非常簡單：
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平且垂直居中
通過組合水平居中和垂直居中的技巧验游，可以實(shí)現(xiàn)非常完美的居中效果。我覺得可以將它們分為三種類型：
寬高固定元素
設(shè)定父級(jí)容器為相對(duì)定位的容器耕蝉，設(shè)定子元素絕對(duì)定位的位置 position: absolute; top: 50%; left: 50% ，最后使用負(fù)向 margin 實(shí)現(xiàn)水平和垂直居中蒜魄， margin 的值為寬高（具體的寬高需要根據(jù)實(shí)際情況計(jì)算 padding ）的一半。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
寬高不固定元素
如果無法獲取確定的寬高旅挤，同樣需要設(shè)定父級(jí)容器為相對(duì)定位的容器伞鲫，設(shè)定子元素絕對(duì)定位的位置 position: absolute; top: 50%; left: 50% 。不同的是驹闰，接下來需要使用 transform: translate(-50%, -50%); 實(shí)現(xiàn)垂直居中：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
使用 transform 有一個(gè)缺陷撒会，就是當(dāng)計(jì)算結(jié)果含有小數(shù)時(shí)（比如 0.5 ）师妙，會(huì)讓整個(gè)元素看起來是模糊的，一種解決方案就是為父級(jí)元素設(shè)置 transform-style: preserve-3d; 樣式：
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
flexbox
使用 flexbox 實(shí)現(xiàn)水平和垂直居中怔檩，只需使用兩條居中屬性即可：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
