flex布局 之 基于可视化窗口（浏览器页面高度）垂直居中

因为 父元素的宽度 是铺满页面，所以 也是基于可视化窗口的垂直居中

.g-cent是父元素，.m-cent是子元素

.g-cent {
    height: 100vh;
    display: flex;
    justify-content: center;/* 水平居中 */
    align-items:center;/* 垂直居中 */
}

.m-cent {
    width: 1200px;
    height: 680px;
    background: aqua;
}

这里解释下父元素设置100vh的原因

Vh:相对于视框的高度：视框高度是100Vh

“视框”说白了就是浏览器窗口的高度，也就是window.innerHeight获取的值

1vh=视窗高度的1%，所以100vh也就是100%

如果给父元素直接设置height：100%；没办法实现垂直居中，具体原因不知，如果哪位大佬知道原因，请告知一下，感谢

来源：CSDN

作者：叫我虫虫就好

链接：https://blog.csdn.net/qq_40319394/article/details/103928087