垂直居中

基于绝对定位

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》一书整理，便于查阅