在前端开发中，实现元素的垂直居中以及让 body 元素占满全屏是常见的需求。Flex 布局作为一种强大的布局模型，为我们提供了简洁有效的解决方案。

让我们来探讨如何使用 Flex 布局实现元素的垂直居中。假设我们有一个父容器和一个子元素，想要让子元素在父容器中垂直居中。我们可以通过以下步骤实现：

1. 设置父容器的 display 属性为 flex 或 inline-flex，这样就开启了 Flex 布局模式。例如：

.parent {
    display: flex;
}

2. 使用 align-items 属性来定义子元素在交叉轴（默认情况下是垂直方向）上的对齐方式。将其值设置为 center 即可实现垂直居中。代码如下：

.parent {
    display: flex;
    align-items: center;
}

如果希望在垂直和水平方向都居中，可以再添加 justify-content: center，justify-content 用于定义子元素在主轴（默认水平方向）上的对齐方式。完整代码如下：

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

接下来，解决 body 元素占满全屏的问题。要使 body 元素占满整个屏幕，我们可以这样做：

1. 重置浏览器的默认样式，去除可能存在的边距等影响。常见的做法是：

body {
    margin: 0;
    padding: 0;
}

2. 然后设置 body 的高度为视口高度（viewport height）。可以使用 CSS3 的 vh 单位，1vh 等于视口高度的 1%，所以设置 height: 100vh 就能让 body 占满整个屏幕高度。代码如下：

body {
    margin: 0;
    padding: 0;
    height: 100vh;
}

在实际应用中，我们可以将这两个需求结合起来。比如，要在占满全屏的 body 容器内实现某个元素的垂直居中，我们可以把 body 作为父容器，开启 Flex 布局并设置垂直居中样式：

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

通过上述方法，利用 Flex 布局，我们能够轻松实现元素的垂直居中以及让 body 元素占满全屏，为页面布局提供更美观、高效的解决方案。