CSS flexbox 是一种强大的布局方式，它可以帮助我们轻松地实现各种复杂的布局。在本文中，我们将探讨如何使用 CSS flexbox 实现视觉居中，包括水平居中和垂直居中。
水平居中
在 CSS 中，实现水平居中最常见的方法是使用 text-align: center。但是，这种方法只适用于行内元素和一些块级元素，对于其他块级元素则无效。而使用 flexbox，我们可以轻松地实现各种元素的水平居中。
1. 对于单个元素
对于单个元素，我们可以使用 display: flex 和 justify-content: center 来实现水平居中。
<div class="container"> <div class="box">居中</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ---- - ------ ------ ------- ------ ----------------- -------- -
上面的代码中，我们将 .container 设置为 flex 容器，然后使用 justify-content: center 属性将 .box 水平居中。
2. 对于多个元素
对于多个元素，我们可以使用 display: flex 和 justify-content: center 来实现水平居中。但是，我们需要将多个元素放入一个父容器中，并将父容器设置为 flex 容器。
<div class="container"> <div class="box">居中1</div> <div class="box">居中2</div> <div class="box">居中3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ---- - ------ ------ ------- ------ ----------------- -------- ------- - ----- -
上面的代码中，我们将 .container 设置为 flex 容器，然后使用 justify-content: center 属性将多个 .box 元素水平居中。
垂直居中
在 CSS 中，实现垂直居中一直是一个难题。但是，使用 flexbox，我们可以轻松地实现各种元素的垂直居中。
1. 对于单个元素
对于单个元素，我们可以使用 display: flex 和 align-items: center 来实现垂直居中。
<div class="container"> <div class="box">居中</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ ----------------- -------- -
上面的代码中，我们将 .container 设置为 flex 容器，然后使用 align-items: center 属性将 .box 垂直居中。
2. 对于多个元素
对于多个元素，我们可以使用 display: flex 和 align-items: center 来实现垂直居中。但是，我们需要将多个元素放入一个父容器中，并将父容器设置为 flex 容器。
<div class="container"> <div class="box">居中1</div> <div class="box">居中2</div> <div class="box">居中3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ ----------------- -------- ------- - ----- -
上面的代码中，我们将 .container 设置为 flex 容器，然后使用 align-items: center 属性将多个 .box 元素垂直居中。
水平和垂直居中
有时候，我们需要同时实现水平和垂直居中。在这种情况下，我们可以使用 display: flex、justify-content: center 和 align-items: center 来实现。
<div class="container"> <div class="box">居中</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ---- - ------ ------ ------- ------ ----------------- -------- -
上面的代码中，我们将 .container 设置为 flex 容器，然后使用 justify-content: center 和 align-items: center 属性将 .box 水平和垂直居中。
结论
使用 CSS flexbox 可以轻松地实现各种复杂的布局，包括视觉居中。在本文中，我们探讨了如何使用 CSS flexbox 实现水平居中、垂直居中和水平垂直居中。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67457cd3c1a23897ea97a7fc