CSS 垂直居中一直是前端开发者们面临的常见难题。在过去，我们通常是通过定位元素、设置它的 margin 或 padding 等方式来实现垂直居中。但这些方法并不十分灵活，容易出现兼容性问题。
CSS Flexbox 技术为我们提供了更加简单灵活的解决方案。本文将介绍在 CSS Flexbox 下实现垂直居中的多种方法，旨在帮助读者快速掌握这一技能。
方法一：使用 align-items 和 justify-content 属性
Flexbox 的 align-items 属性用于控制元素在父容器中的垂直对齐方式。默认值为 stretch，即元素被拉伸到沿容器的交叉轴完全占满。如果我们将该属性设置为 center，则元素将在交叉轴上居中对齐。
而 justify-content 属性用于控制元素在父容器中的水平对齐方式。默认值为 flex-start，即元素在主轴上从容器的开始位置开始排列。如果我们将该属性设置为 center，则元素将在主轴上居中对齐。
下面是一个示例代码：
---- --------------- ---- ------------------------- ------
------- - -------- ----- ------- ------ ------------ ------- ---------------- ------- -
上述代码中，我们先将父容器的 display 属性设置为 flex，使得其成为一个 Flexbox 容器。然后分别使用 align-items 和 justify-content 将子元素水平垂直居中。这样，子元素就会出现在父容器的正中央。
方法二：使用 align-self 和 justify-self 属性
除了使用父容器的 align-items 和 justify-content 属性来控制子元素的对齐方式之外，我们还可以直接在子元素中使用 align-self 和 justify-self 这两个属性来控制自身在父容器中的对齐方式。
align-self 用来控制子元素在交叉轴上的对齐方式，而 justify-self 用来控制子元素在主轴上的对齐方式。它们的默认值也是 stretch 和 auto。下面是一个示例代码：
------- - -------- ----- ------- ------ ---------------- ------- - ------ - ------- ----- ------ ----- ----------------- -------- ----------- ------- ------------- ------- -
上述代码中，我们将父容器的 display 属性设置为 flex，justify-content 属性设为 center，让子元素在主轴正中央对齐。我们还给子元素设置了自身的 align-self 和 justify-self 属性，将子元素在交叉轴和主轴上都居中对齐。这样，子元素也会出现在父容器的正中央。
方法三：使用 margin 属性
除了使用 align-items 和 justify-content 属性来控制子元素的对齐方式之外，我们还可以利用 margin 属性来实现垂直居中。
在这个方法中，我们首先需要将子元素的高度设为固定值，然后使用 margin:auto 技巧来将子元素在父容器中垂直居中。具体代码如下：
------- - -------- ----- ------- ------ ---------------- ------- - ------ - ------- ----- ------ ----- ----------------- -------- ------------ -
上述代码中，我们将父容器的 display 属性设置为 flex，justify-content 属性设为 center，让子元素在主轴正中央对齐。我们还将子元素的高度设为固定值，并将它的 margin 属性设置为 auto。这样，子元素就会在父容器中垂直居中。
总结
本文介绍了在 CSS Flexbox 下实现垂直居中的多种方法，并给出了示例代码。当然，这些方法并不是唯一的解决方案，读者可以灵活运用这些知识，结合实际项目来实现各种需求。
CSS Flexbox 技术为前端开发者们提供了更加简单、灵活的解决方案，帮助我们更加高效地完成各种垂直居中需求。期望读者可以通过本文的介绍，深入理解 CSS Flexbox 的应用，为自己的项目提升更加出色、高效的表现！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0b63a48841e9894ccdcb3