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