在前端开发中，垂直居中是一个非常常见的需求。然而，当要实现一个百分比高度的元素的垂直居中时，情况就会变得有些棘手。在本文中，我们将介绍使用 CSS Flexbox 布局实现这一目标的技巧和方法。
Flexbox 布局简介
CSS Flexbox 布局是一种强大的 CSS 布局方法，旨在帮助开发人员轻松地创建灵活和响应式的布局。它使用了一些新的 CSS 属性和值，包括 display: flex、flex-direction、align-items 和 justify-content 等，这些属性和值可以使元素在不同屏幕尺寸下自适应布局。
实现垂直居中
要实现百分比高度元素的垂直居中，我们可以使用如下的 HTML 结构：
<div class="parent"> <div class="child"></div> </div>
其中，父元素 .parent 的高度为百分比值（如 height: 50%;），子元素 .child 的高度为固定值（如 height: 100px;）。现在的问题是如何将 .child 垂直居中在 .parent 中。
方法一：使用 align-items 和 justify-content
我们可以将 .parent 设置为 flex 容器，使用 align-items 属性将 .child 垂直居中，使用 justify-content 属性将其水平居中，如下所示：
-- -------------------- ---- ------- ------- - -------- ----- ------------ ------- -- ---- -- ---------------- ------- -- ---- -- ------- ---- - ------ - ------- ------ ------ ------ -
这种方法非常简单，但它只适用于垂直居中的元素高度是固定的情况。
方法二：使用 align-self
如果我们要垂直居中的元素高度是百分比值，就需要使用 align-self 属性。此属性可以在特定元素上设置，用于覆盖父元素上的 align-items 属性。例如：
-- -------------------- ---- ------- ------- - -------- ----- ------------ ------- ---------------- ------- ------- ---- - ------ - ------- ---- -- -- ----- ---- -------------- ------------ ------------ ------- -- ------ ------ ----------- ------- -- - ----- ---- -- -
这种方法需要注意的一点是，如果子元素的高度大于父元素的高度，那么这种方法将不起作用。
方法三：使用 transform
另一种实现垂直居中的方法是使用 transform。我们可以将 .child 的 position 设置为 absolute，再使用 transform: translateY(-50%); 将其垂直居中，如下所示：
-- -------------------- ---- ------- ------- - --------- --------- ------- ---- - ------ - --------- --------- ---- ---- ---------- ----------------- ------- ---- ------ ------ -
需要注意的是，这种方法需要父元素的位置属性为 relative 或 absolute。
总结
在本文中，我们介绍了通过 CSS Flexbox 布局实现百分比高度元素的垂直居中的三种方法。每种方法都有其优缺点，在使用时需要根据具体情况选择合适的方法。希望这些技巧能帮助你更好地掌握 Flexbox 布局，实现更加灵活和响应式的布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652e8f747d4982a6ebf97876