设置两个并排的div并居中

以下是设置两个并排的div并居中的代码示例：

<div class="container">
  <div class="box1">阿萨德飞</div>
  <div class="box2">大财主</div>
</div>

<style>
  .container {
    text-align: center; /* 设置父元素文本居中 */
  }
  .box1, .box2 {
    display: inline-block; /* 将两个div设置为行内块元素 */
    width: 100px; /* 设置div的宽度 */
    height: 50px; /* 设置div的高度 */
    background-color: #ccc; /* 设置div的背景颜色 */
  }
</style>

在上述代码中，我们首先创建了一个父元素`container`，并将其文本居中。然后，我们创建了两个子元素`box1`和`box2`，并将它们设置为行内块元素，这样它们就可以并排显示了。最后，我们设置了`box1`和`box2`的宽度、高度和背景颜色，以便更好地展示效果。

相关问题

HTML实现两个div板块居中并排

可以使用flex布局来实现两个div板块居中并排，具体实现如下：

HTML代码：

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  margin: 10px;
}

在上面的代码中，我们首先使用flex布局将容器设置为水平和垂直居中。然后，每个盒子都有一个宽度和高度，并使用margin属性设置它们之间的间距。最后，我们使用border属性为每个盒子添加一个边框，以便更好地看到它们的位置。

css 多个div 并排居中

CSS中让多个`<div>`并排居中通常可以使用Flexbox或Grid布局来实现。以下是两种常见的方法：

**1. 使用Flexbox：**

.container {
  display: flex; /* 开启flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100%; /* 如果需要，设置外层容器的高度 */
}

.divs-container {
  display: flex;
  flex-wrap: wrap; /* 让div自动换行 */
}

然后在HTML里这样应用：

<div class="container">
  <div class="divs-container">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
  </div>
</div>

**2. 使用Grid布局：**

.container {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应宽度，每个格子至少200px宽 */
  height: 100%;
}

.divs-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1fr, 1fr));
}

HTML结构同上。