在网页布局开发中，让body元素高度占满整个浏览器视口，并且内部内容垂直水平居中是非常常见的需求，结合Flex布局可以通过简单的属性配置实现这个效果。
核心实现思路
要实现body高度100%且内容垂直居中，需要完成两个核心步骤：首先让body的高度占满整个视口，然后给body设置Flex布局相关属性让内部子元素居中。
第一步：设置body高度为100%视口高度
默认情况下body的高度是由内部内容撑开的，不会自动占满整个视口，我们需要通过CSS设置body的最小高度为100视口高度，也就是min-height: 100vh，这里使用min-height而不是height是为了避免内容超出视口时出现布局异常。
第二步：配置Flex布局居中属性
给body开启Flex布局后，使用justify-content: center实现水平居中，使用align-items: center实现垂直居中，这样body内部的直接子元素就会同时实现水平和垂直方向的居中。
完整代码示例
以下是完整的HTML和CSS代码实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局body垂直居中</title>
<style>
/* 重置默认margin，避免浏览器默认样式影响布局 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 设置body最小高度为100%视口高度 */
min-height: 100vh;
/* 开启Flex布局 */
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
/* 可选：添加背景色方便观察效果 */
background-color: #f5f5f5;
}
.content {
width: 200px;
height: 100px;
background-color: #409eff;
color: white;
/* 内容区内部文字也居中，提升视觉效果 */
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="content">
我是居中内容
</div>
</body>
</html>
常见问题说明
- 为什么不用
height: 100%设置body高度？因为如果父元素html没有设置高度，body的100%高度无法生效，而100vh是相对于视口的高度，不需要依赖父元素设置，使用更方便。 - 如果body内部有多个子元素需要整体居中，只需要把这些子元素包裹在一个容器里，把这个容器作为body的直接子元素即可，Flex居中的效果会作用在容器上。
- 如果需要兼容非常旧的浏览器，需要注意vh单位的兼容性，可以额外给html设置
height: 100%，再给body设置height: 100%作为降级方案。
方案优势
这种实现方式相比传统的定位居中、表格布局居中，代码量更少，不需要计算偏移量，也不会破坏文档流，后续如果需要调整布局或者添加其他元素，只需要修改对应的Flex属性即可，维护成本更低。
Flex布局body高度100%垂直居中CSS修改时间：2026-07-23 22:36:22