第一種：基于絕對定位的解決方案

用top,left移動只是將div的左上角移到父元素的正中心，視覺上并沒有使div到達中心，所以要配合transform使用。當我們在translate() 變形函數(shù)中使用百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的。

缺點：如果需要居中的元素已經(jīng)在高度上超過了視口，那它的頂部會被視口裁切掉。

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的解決方案

先給這個待居中元素的父元素設(shè)置 display:flex ，再給這個元素自身設(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也是個很有用的屬性 。這個關(guān)鍵字將解析為這個容器內(nèi)部最大的不可斷行元素的寬度（即最寬的單詞、圖片或具有固定寬度的盒元素）