CSS笔记（一）——垂直居中

垂直居中

• 使用计算方式实现

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

• 使用CSS3的 transform。可以在transform中的translate()使用百分比，让元素移动相对于自身的宽度和高度

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

一个小例子：div里有另一个div，你需要垂直居中，那么就给里面的div设置以上属性，然后给父div设置relative（不脱离文档流，但top等有效）
缺点：
绝对定位通常不是一个很好的方法，对整体布局影响太大

• 视窗单位解决方案

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

有用性是有极限的，因为它只适用于元素在视窗中垂直居中

• Flexbox解决方案：在需要垂直居中的父元素上设置display:flex和在垂直居中的元素上设置margin:auto

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