頁面佈局，居中是絕對少不了的，居中的方法有很多，今天分享幾個。
Margin 0 auto、text-align:center、line-height這幾個就不用多說了，適合文字、圖片和塊元素水平居中。如果知道容器高度或者是內容高度，很容易就能實現簡單的居中。
Flex佈局：
彈性佈局，會使用的絕對非常建議使用這個佈局，現在相容性也好，要是非得相容很低版本的瀏覽器，這個佈局還是得考量一下。兩個居中屬性
justify-content: center;align-items: center;
transform: translateX(-50%) translateY(-50%)：
我們不知道容器寬高或者是內容寬高的時候，設定margin: 50%;然後使用transform的translated，這個屬性的單位不是具體的畫素單位的時候，百分比就是以自身的寬高計算的。一般都是配合定位使用。
display:table-cell，使用表格屬性：
通過表格屬性去居中，父元素：
display: table-cell;vertical-align: middle;text-align: center;
子元素需要設定：
display: inline-block;
絕對定位：
知道內容元素的寬高，設定top和left都是50%，這時候設定margin-top和margin-left內容元素寬高的一半，就能居中。
不知道寬高的情況下，設定top、left、right、bottom都設定0，然後margin: auto；也能居中。
Coding 個人筆記