前言：在很多情況下，我們要使用到內容的居中，這里的居中包括了垂直居中和水平居中，下面來淺談一下
對於水平居中的屬性text-align和垂直居中屬性vertical-align的理解
（1）text-align
如果要實現水平居中，比如我們要實現塊狀元素(block)內，子元素的水平居中
<div class="div1"> <div class="div2"> </div> </div>
比如我們要實現div2元素在父元素div1內的居中，我們則會有：
.div2{
display:inline-block
}
並且要設置父元素的屬性即：
.div1{
text-align:center
}
實現效果為：
關鍵：要實現這種水平居中，在設置父元素具有text-align:center屬性的基礎上，必須設置子元素（要居中
的元素）的display:inline-block或者display:inline，即只能實現行內塊的水平居中。
（2）vertical-align
這里簡單的說一下，vertical-align屬性實現垂直居中
<div class="div1">
<div class="div2">
</div>
</div>
要實現div1父元素內的子元素div2，讓div2實現垂直居中，我們可以這樣設置：
.div1{
display:table-cell;
vertical-align:middle;
}
實現的效果為：
注：簡單的實現垂直居中，我們可以發現並不需要對子元素進行特殊設置，我們只需要設置父元素的
display:table-cell;vertical-align:middle 之后就能實現垂直方向的居中。（這種方式實現的垂直居中，會
導致水平不居中）
(3)補充
1.父元素設置屬性為text-align:center,並設置子類快為inline-block那么，子類3個塊都會實現水平居中
2.父元素設置為line-height:= height: 並設置子類塊屬性為inline-block，那么子類的所有都能實現垂直居中
3.對於text-align:center,如果父類元素的display:inline-flex，則子元素不能實現水平居中
2017.1.13補充，line-height:100px設置行高，此時給定了基線，此時如果要實現居中，只需要讓基線居中， 通過設置vertical-align:middle
align-items: center與 justify-content: center
display: flex;
align-items: center; /* 彈性盒子flex 元素位於容器的中心
設置彈性盒子元素在垂直方向上（縱軸）的對齊方式。*/
justify-content: center; /* 彈性盒子flex 元素位於容器的中心
設置彈性盒子元素在主軸（橫軸）的對齊方式*/
display:table-cell屬性簡介
display：table-cell；會使元素表現的類似一個表格中的單元格td，利用這個特性可以實現文字的垂直居中效果。同時它也會破壞一些CSS屬性，使用table-cell時最好不要與float以及position: absolute一起使用，設置了table-cell的元素對高度和寬度高度敏感，對margin值無反應，可以響應padding的設置，表現幾乎類似一個td元素。
小結：
1. 不要與float：left; position:absolute; 一起使用
2. 可以實現大小不固定元素的垂直居中
3. margin設置無效，響應padding設置
4. 對高度和寬度高度敏感
5. 不要對display：table-cell使用百分比設置寬度和高度
原文鏈接：https://blog.csdn.net/qq_40281275/article/details/83614581
原文鏈接：https://blog.csdn.net/liwusen/article/details/51051079