背景
在 CSS 中，Flexbox 布局已经被广泛应用于网页设计中。而其中的 flex 布局是实现自适应和灵活布局的一种有效方式。然而，在使用 flex 布局时，有时会遇到一个常见的问题：flex 布局子元素无法垂直居中，而只有水平居中。
这种情况下，我们该如何解决这个问题？本篇文章将提供一些实用的解决方案和示例代码，帮助前端开发工程师更好地解决这个问题。
原因分析
在 Flexbox 中，可以通过 align-items 和 justify-content 属性来控制子元素的垂直和水平对齐方式。默认情况下，align-items 属性被设置为 stretch，即子元素会被拉伸到与容器等高，这种情况下子元素无法垂直居中。
解决方案
使用 Flexbox 的 align-items 和 justify-content 属性
对于垂直居中问题，我们可以通过设置 align-items: center 来解决。align-items 属性指定了 Flexbox 容器中子元素在交叉轴上的对齐方式。当 align-items 属性设置为 center 时，子元素将在交叉轴上垂直居中。
示例代码：
-- -------------------- ---- -------
---- ------------------
---- ----------------------
---- ----------------------
------
-------
---------- -
-------- -----
------------ -------
---------------- -------
------- ------
-
---- -
----------------- -------
------ ------
------- ------
-
--------在上述代码段中，我们设置了 .container 容器的 align-items 属性为 center，这样 .box 容器中的子元素就能够在交叉轴上垂直居中。
使用绝对定位
如果对于某一特定情况，你可能不想使用 Flexbox 中的 align-items 属性，你可以使用 CSS 中的绝对定位来实现子元素的垂直居中。
示例代码：
-- -------------------- ---- -------
---- ------------------
---- ----------------------
---- ----------------------
------
-------
---------- -
--------- ---------
------- ------
-
---- -
----------------- -------
------ ------
------- ------
--------- ---------
---- ----
---------- -----------------
-
--------在上述示例代码段中，我们将 .container 标签的 position 属性设置为 relative，这样 .box 标签就能相对于 .container 标签进行定位。接下来，在 .box 标签中，我们使用了 top: 50%; 属性和 transform: translateY(-50%); 属性来使其始终垂直居中。
总结
在本文中，我们讨论了 CSS Flexbox 中的 flex 布局子元素垂直居中的问题，提供了两种有效的解决方案：Flexbox 的 align-items 和 justify-content 属性，以及 CSS 中的绝对定位技术。在日常开发中，我们应该了解这些技术，并且根据实际情况选择合适的方法来解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649032e248841e9894e5e665