垂直居中

• 使用計(jì)算方式實(shí)現(xiàn)

main {
    position: absolute;
    top: calc(50% - 3em);
    left: calc(50% - 9em);
    width: 18em;
    height: 6em;
}

• 使用CSS3的 transform?？梢栽趖ransform中的translate()使用百分比，讓元素移動(dòng)相對(duì)于自身的寬度和高度

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

一個(gè)小例子：div里有另一個(gè)div，你需要垂直居中，那么就給里面的div設(shè)置以上屬性，然后給父div設(shè)置relative（不脫離文檔流，但top等有效）
缺點(diǎn)：
絕對(duì)定位通常不是一個(gè)很好的方法，對(duì)整體布局影響太大

• 視窗單位解決方案

main {
    width: 18em;
    padding: 1em 1.5em;
    margin: 50vh auto 0;
    transform: translateY(-50%);
}

有用性是有極限的，因?yàn)樗贿m用于元素在視窗中垂直居中

• Flexbox解決方案：在需要垂直居中的父元素上設(shè)置display:flex和在垂直居中的元素上設(shè)置margin:auto

body {
    display:flex;
}
main {    
    margin: auto;
}