如果你在开发网站时需要将多个 div 盒子放在一起，可能需要让它们水平和垂直对齐。这里介绍几种实现方法。
1. 使用 Flexbox
Flexbox 是 CSS 的一种布局方式，可以轻松地实现水平和垂直对齐。以下是一个使用 Flexbox 的示例代码：
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- -- ---- -- ------------ ------- -- ---- -- - ---- - ------ ------ ------- ------ ----------------- ----- ------- --- ----- ----- -
在上面的代码中，使用 display: flex 将 .container 容器设置为 Flexbox 布局。然后使用 justify-content: center 和 align-items: center 分别将盒子水平和垂直居中。
2. 使用 Grid
另一种 CSS 布局方式是 Grid。以下是一个使用 Grid 的示例代码：
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- -- -- -- -------------- ------- -- ---- -- ------------ ------- -- ---- -- - ---- - ------ ------ ------- ------ ----------------- ----- ------- --- ----- ----- -
在上面的代码中，使用 display: grid 将 .container 容器设置为 Grid 布局。然后使用 grid-template-columns 设置三列，使用 justify-items: center 和 align-items: center 分别将盒子水平和垂直居中。
3. 使用绝对定位
还可以使用 CSS 的绝对定位来实现水平和垂直对齐。以下是一个使用绝对定位的示例代码：
<div class="container"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> </div>
-- -------------------- ---- ------- ---------- - --------- --------- - ---- - --------- --------- ---- ---- -- ---------- -- ----- ---- -- ---------- -- ---------- --------------- ------ -- ---- -- ------ ------ ------- ------ ----------------- ----- ------- --- ----- ----- -
在上面的代码中，使用 position: relative 将 .container 容器设置为相对定位。然后使用 position: absolute 将 .box 盒子绝对定位，并使用 top: 50% 和 left: 50% 让它们分别垂直和水平居中。最后使用 transform: translate(-50%, -50%) 修正位置。
结论
以上是几种实现水平和垂直对齐多个 div 盒子的方法。如果你需要让盒子对齐，可以选择其中一种方法并根据需要进行修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29760