垂直居中

 

之前一直用的absolute定位然后高度写死，再用负值margin。
现在主要用flex

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

今天发现还有absolute定位，left top 50% 最后transform：translate（-50%，-50%）的神仙写法。
如果是基于视口居中，还有
margin：50vh auto 0 auto;
transform：translateY(-50%);
的神仙写法

如果用flex

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

在要垂直居中的元素上直接写margin：auto就能【垂直】居中了

 

 

根据【CSS Box Alignment Module Level 3】(http://w3.org/TR/css-align) 的计划

听说以后可以这样写了：

align-self: center;

希望这一天早一点来到吧