第一種：基于絕對(duì)定位的解決方案
用top,left移動(dòng)只是將div的左上角移到父元素的正中心搅裙，視覺上并沒有使div到達(dá)中心澈灼，所以要配合transform使用讳癌。當(dāng)我們在translate() 變形函數(shù)中使用百分比值時(shí)巷疼，是以這個(gè)元素自身的寬度和高度為基準(zhǔn)進(jìn)行換算和移動(dòng)的搀擂。
缺點(diǎn)：如果需要居中的元素已經(jīng)在高度上超過了視口，那它的頂部會(huì)被視口裁切掉吗跋。
div { ?position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }
第二種：基于視口單位的解決方案
新的長度單位：vw,vh
1vw=1%的適口寬度
1vh=1%的視口寬度
div {
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
}
第三種：基于flexbox的解決方案
先給這個(gè)待居中元素的父元素設(shè)置 display:flex 侧戴，再給這個(gè)元素自身設(shè)置我們再熟悉不過的 margin: auto ：
father{ display:flex;min-height:100vh;margin:0;}
child{ margin:auto;
/*以下代碼使child的文字也居中
align-items:center; justify-content:center;
*/
}
直接讓某div的文字居中，使用屬性
{display: flex;
align-items: center;
justify-content: center;}
ps. ? min-content也是個(gè)很有用的屬性 小腊。這個(gè)關(guān)鍵字將解析為這個(gè)容器內(nèi)部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素）
