HTML 如何将多个 div 居中在另一个 div 中

在本文中，我们将介绍如何在 HTML 中将多个 div 元素居中显示在另一个 div 元素中。

阅读更多：HTML 教程

1. 使用 flexbox 布局

Flexbox 是一种弹性布局模型，可以轻松实现各种布局需求。通过设置父容器的 display 属性为 flex，就可以启用 flexbox 布局。

首先，在父容器中包裹要居中的 div 元素。然后，使用以下 CSS 属性将 div 元素居中。

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .child {
    margin: 10px;
  }
</style>

<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child">Div 3</div>
</div>

以上代码中，使用 justify-content: center 将子元素水平居中，align-items: center 将子元素垂直居中。.child 类是要居中显示的 div 元素的样式类，可根据实际需求进行自定义。

2. 使用 grid 布局

Grid 布局是另一种强大的布局模式，可以将页面分割为多个区域，并控制各个区域的大小和位置。

使用 grid 布局将多个 div 元素居中的示例如下：

<style>
  .parent {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 10px;
  }

  .child {
    width: 100px;
    height: 100px;
  }
</style>

<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child">Div 3</div>
</div>

以上代码中，使用 place-items: center 将子元素居中对齐。grid-template-columns 属性指定列的大小和数量，repeat(auto-fit, minmax(100px, 1fr)) 表示列数根据父容器的尺寸自动适应，并且每列的最小宽度为 100px。grid-gap 属性定义了子元素之间的间隔。

3. 使用文本对齐方式和定位

如果不想使用 flexbox 或 grid 布局，还可以使用文本对齐方式和绝对定位来实现多个 div 元素的居中。

<style>
  .parent {
    text-align: center;
    position: relative;
  }

  .child {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 10px;
  }
</style>

<div class="parent">
  <div class="child">Div 1</div>
  <div class="child">Div 2</div>
  <div class="child">Div 3</div>
</div>

以上代码中，通过设置父容器的 text-align: center，将子元素水平居中。将 .child 类的 display 属性设置为 inline-block，能够使子元素在一行内显示，并且可以设置宽度和高度。通过给 .child 类设置 margin 来调整子元素之间的间距。