垂直居中

基於絕對定位

main{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

基於視口單位

margin百分比行不通，由於margin的百分比值是以父元素的寬度做爲解析基準的。沒錯，即便對於margin-top和margin-bottom來講也是這樣！

如下方法基於vw，vh，vmin，vmax單位，只適用於在視口中居中的場景。

main{
    margin:50vh auto 0;
    transform:translateY(-50%);
}

基於Flexbox

body{
    display:flex;
    min-height:100vh;
    margin:0;
}

main{
    margin:auto;
}

或

main{
    display:flex;
    align-items:center;
    justify-content:center;
    width:18em;
    height:10em
}

---

注：本文根據《css secret》一書整理，便於查閱