Flex 布局中实现 body 100% 高度且 div 元素垂直居中的方法

在网页开发中，经常会遇到需要将页面元素垂直居中显示的需求，尤其是当我们希望body元素占满整个视口高度，并且内部的div元素能够在垂直方向上居中对齐。Flex布局为我们提供了一种简洁而有效的解决方案。

要让body元素的高度占满整个视口，我们可以通过设置html和body元素的高度为100%来实现。在CSS中添加如下代码：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

这里将html和body的高度都设置为100%，并去除了默认的外边距和内边距，确保body元素能够准确地填充整个视口。

接下来，我们使用Flex布局来让内部的div元素垂直居中。假设我们有一个div元素，其类名为“center-div”，我们可以这样设置它的父容器（这里是body）的样式：

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

这里将body元素设置为Flex容器，justify-content: center; 用于在水平方向上居中对齐子元素，align-items: center; 则用于在垂直方向上居中对齐子元素。

最后，为了让我们的div元素有一个明显的显示效果，我们可以给它设置一些样式，比如背景颜色和宽度、高度：

.center-div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

通过以上步骤，我们就可以在Flex布局中实现body元素占满整个视口高度，并且内部的div元素垂直居中显示。这种方法简单且兼容性较好，能够在大多数现代浏览器中正常工作。

在实际应用中，我们可以根据具体需求调整div元素的样式和布局，还可以结合其他CSS属性来实现更复杂的页面效果。掌握这种Flex布局的垂直居中方法，能够让我们更高效地进行网页布局和设计，提升用户体验。