程序开发 · 2024年2月16日

Flex 布局下如何实现 Body 100% 高度并垂直居中?

flex 居中排布,body 100% 高度

在 Flex 布局中,需要设置 align-items: center,而要让 Body 100% 则需要额外设置 height,实现如下:

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

登录后复制

如果 Body 设置 height: 100vh,可能会出现其他兼容性问题,如需了解详情,可参考移动端 body 高度为100vh 时,实际高度超过了视窗高度。

以上就是Flex 布局下如何实现 Body 100% 高度并?的详细内容,更多请关注GTHOST其它相关文章!