在前端开发中，实现元素的垂直居中以及让页面 body 全屏展示是常见的需求。Flex 布局作为一种强大的布局模型，为我们提供了便捷的解决方案。

首先来谈谈如何使用 Flex 布局实现元素垂直居中。Flex 布局即 Flexible Box，意为“弹性布局”，用于为盒状模型提供最大的灵活性。当我们要使一个子元素在父元素中垂直居中时，需要对父元素设置 display: flex 或 display: inline-flex 来启用 Flex 布局模式。

如果要实现单行元素的垂直居中，只需要设置父元素的 align-items: center。例如：

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

这行代码会将所有子元素在交叉轴（默认是垂直方向）上居中对齐。

要是存在多行子元素，并且希望它们在垂直方向上均匀分布且垂直居中，可以结合使用 align-items 和 justify-content 属性。比如：

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

这里 justify-content: space-around 使子元素在主轴上均匀分布，flex-wrap: wrap 确保当子元素宽度总和超过父元素宽度时进行换行显示。

接下来看看如何让 body 全屏展示。在 CSS 中，我们可以通过设置 height 和 width 来实现。

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

100vh 表示视口高度的 100%，100vw 表示视口宽度的 100%。同时将 margin 和 padding 设为 0，以去除浏览器默认的边距和内边距，确保 body 能够完全填满整个屏幕。

通过合理运用 Flex 布局的属性以及对 body 样式的设置，我们能够轻松实现元素垂直居中以及 body 全屏展示，提升页面的布局效果和用户体验，为前端开发带来更多的可能性和便捷性。无论是简单的页面还是复杂的应用程序，这些技巧都能发挥重要作用。