Flexbox 是一种 CSS 布局模式，它可以更加轻松地实现众多复杂布局效果。在前端开发中，我们经常需要垂直居中某些元素。Flexbox 提供了一种非常简单的方式来实现这个效果。
垂直居中的问题
在实现垂直居中之前，让我们来看看为什么它会成为一个问题。在 HTML 中，每个元素占据的空间是不同的，元素的大小又受到字体、图像、边框、内边距、外边距以及盒模型等等的影响。这些因素往往会导致我们的元素不能垂直居中。
Flexbox 解决方案
Flexbox 是一个很好的解决方案，让我们来看看如何在 Flexbox 中实现垂直居中。
首先，让我们创建一个包含两个 div 元素的容器。
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> </div>
接下来，为容器添加以下样式。
.container {
display: flex;
align-items: center;
justify-content: center;
}这些样式会将容器转换为 Flexbox 容器，并将子元素垂直居中。align-items: center; 属性设置子元素相对于容器的垂直位置。justify-content: center; 属性设置子元素相对于容器的水平位置。
辅助工具
除了上述方法，还有一些辅助工具可以帮助我们更好地实现垂直居中。
其中一个工具是 margin: auto;，它可以将元素居中，无论是水平居中还是垂直居中。
.box {
margin: auto;
}另一个工具是两个元素之间的空隙，我们可以使用 flex-grow 属性设置元素之间的空隙。
.box {
flex-grow: 1;
}这个属性会将元素撑满，实现元素之间的等距离空隙。
总结
垂直居中是前端开发中常见的需求，但目前在各浏览器兼容性方面仍存在一些问题。Flexbox 提供一种简单的解决方案，但也需要我们在实际应用时合理运用，充分考虑浏览器兼容性和效果要求。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ --------------- -------------- -------- ------------ - ----------- ----- --------------- ------- ------------------- ------- ---------- ------ ---------- --- ----- ----- --- ------ - --------- ------ ---------- ------ ---------- --- ----- ----- --- ---------- ------- ------ ------- ------- ----------- ----- ------------------ ------ --------------- ------- ------ --------------- ------- ------- - ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b2423968c7c53b0d811b3