Flexbox 是一个用于布局的 CSS3 新属性，它可以使面板和它们的子元素具有弹性，并根据需要伸缩和缩小它们。Flexbox 对于实现垂直居中非常有用，本文将介绍 CSS Flexbox 实现垂直居中的几种方法。
一、使用 align-items 属性
Flexbox 的 align-items 属性可以控制父元素中所有子元素在垂直方向上的对齐方式。默认情况下，该属性的值是 stretch，即所有子元素尽可能地拉伸以填充整个容器。但是，使用该属性可以将所有子元素对齐到中心。
.container {
display: flex;
align-items: center;
}二、使用 justify-content 属性
通过使用 justify-content 属性，您可以控制在水平方向上如何对齐子元素。例如，您可以使用 justify-content:center; 将其水平居中。
.container {
display: flex;
justify-content: center;
align-items: center;
}三、使用 flex 属性
当您使用 Flexbox 布局时，您不仅可以控制 可伸缩性，还可以使用 flex 属性直接控制它们的大小和位置。相对于固定高度 和 100% 高度，这非常有用。
-- -------------------- ---- ------- ---------- - -------- ----- ------- ------ - ---- - ----- -- -------- ----- ---------------- ------- ------------ ------- -
以上是三种常见的方法，使子元素在父元素中垂直居中。
四、使用 Flexbox 进行响应式设计
作为一项响应式设计技术，Flexbox 是非常有用的工具。您可以通过添加 @media 查询，根据视口的尺寸实现不同的布局方案。
@media only screen and (max-width: 600px) {
.container {
display: block;
}
.box {
text-align: center;
}
}结论
在本文中，我们介绍了 CSS Flexbox 实现垂直方向的居中对齐技巧。我们使用 align-items和 justify-content 属性，以及 flex 属性控制子元素的大小和位置，通过这些方法，我们可以实现子与父元素的垂直居中。这是一项强大而有用的技术，是响应式设计的重要工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fac0c044713626014fcd9b