作为前端开发人员，实现元素的水平居中和垂直居中是很常见的需求。CSS Flexbox 提供了一种简单而有效的方法来解决这个问题，让我们一起来学习如何使用 Flexbox 实现元素的居中显示。
什么是 CSS Flexbox？
CSS Flexbox 是一种布局模式，它允许您在容器中创建灵活的和可响应的布局。Flexbox 将容器分成了一个或多个伸缩容器和伸缩项。伸缩容器包含了伸缩项，并根据你设置的 flex 属性来对伸缩项进行分配。
如何实现居中元素？
在使用 Flexbox 实现居中元素之前，我们需要明确一些概念：
- main axis（主轴）：在 Flexbox 中，主轴通常是水平方向，但也可以在设置了 flex-direction: column 的容器中变为垂直方向。
- cross axis（交叉轴）：与主轴垂直的轴，用于对齐和分布元素。
- flex container（伸缩容器）：应用 display: flex 或 display: inline-flex 的元素。
- flex item（伸缩项）：伸缩容器内的子元素。
实现水平居中
要实现元素在水平方向上的居中，我们只需要在伸缩容器上设置属性 justify-content: center，这会使伸缩容器中的伸缩项在水平方向上保持居中。
.container { display: flex; justify-content: center; }
实现垂直居中
要实现元素在垂直方向上的居中，我们只需要在伸缩容器上设置属性 align-items: center，这会使伸缩容器中的伸缩项在垂直方向上保持居中。
.container { display: flex; align-items: center; }
实现水平垂直居中
如果您希望实现元素在水平和垂直方向上的居中，您可以将上述两种属性结合在一起来实现此目的。
.container { display: flex; justify-content: center; align-items: center; }
示例代码
下面是一个使用 Flexbox 实现元素在水平和垂直方向上居中的示例。
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ------- ------------------ ------- ---- - ------- -- -------- -- - ---------- - ------- ------ -------- ----- ---------------- ------- ------------ ------- - ---- - ------ ------ ------- ------ ----------------- -------- - -------- ------- ------ ---- ------------------ ---- --------------------------- ------ ------- -------展开代码
上述示例中，我们使用了一个高度为 100vh 的伸缩容器将 div.box 元素居中显示。div.box 元素具有宽度和高度，并带有背景颜色。
结论
CSS Flexbox 是实现元素水平垂直居中的一种简单而强大的方式。通过掌握一些基本概念和属性，您可以很容易地使用 Flexbox 实现各种不同的布局。希望这篇文章能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676fa465e9a7045d0d75189e
