在前端开发中，经常需要实现元素的居中对齐，特别是在响应式布局中更是不可或缺。CSS Flexbox 是一种强大的布局方式，可以轻松实现横向居中和纵向居中。本文将介绍如何使用 CSS Flexbox 实现这两种居中方式，并提供示例代码供参考。
1. 横向居中
在实现横向居中时，我们需要将元素的宽度设置为固定值或百分比，并将其包裹在一个容器中。然后，将容器的 display 属性设置为 flex，并使用 justify-content 属性将子元素水平居中。
示例代码如下：
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ---- - ------ ------ ------- ------ -
在上面的代码中，我们将容器的 display 属性设置为 flex，这将使其成为一个 Flexbox 容器。然后，使用 justify-content 属性将子元素水平居中。最后，设置子元素的宽度为固定值 200px。
2. 纵向居中
在实现纵向居中时，我们需要将元素的高度设置为固定值或百分比，并将其包裹在一个容器中。然后，将容器的 display 属性设置为 flex，并使用 align-items 属性将子元素垂直居中。
示例代码如下：
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ -
在上面的代码中，我们将容器的 display 属性设置为 flex，这将使其成为一个 Flexbox 容器。然后，使用 align-items 属性将子元素垂直居中。最后，设置容器的高度为固定值 200px，子元素的宽度为固定值 100px。
3. 横向和纵向居中
如果我们需要同时实现横向和纵向居中，可以将上述两种方法结合起来。
示例代码如下：
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------ ----- ------- ------ - ---- - ------ ------ ------- ------ -
在上面的代码中，我们将容器的 display 属性设置为 flex，并使用 justify-content 属性将子元素水平居中，使用 align-items 属性将子元素垂直居中。最后，设置容器的宽度为 100%，高度为 100vh，子元素的宽度为固定值 200px。
4. 总结
CSS Flexbox 提供了一种强大的布局方式，可以轻松实现横向居中和纵向居中。通过结合使用 justify-content 和 align-items 属性，我们可以同时实现横向和纵向居中。希望本文能够对你有所帮助，并提供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6513f7c595b1f8cacdc70cb4