需要3个div并排居中对齐

为了实现需要3个div并排居中对齐的效果，可以使用Flexbox布局或者Grid布局来实现。

Flexbox布局： Flexbox布局是一种用于创建灵活的、自适应的布局的CSS模块。以下是实现3个div并排居中对齐的示例代码：

HTML代码：

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

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

在上述代码中，通过设置.container的display属性为flex，并使用justify-content: center;和align-items: center;来实现水平和垂直居中对齐。.box表示每个div的样式，可以根据实际需求进行调整。

Grid布局： Grid布局是一种二维布局系统，可以将页面划分为行和列，并通过指定网格单元来定位元素。以下是实现3个div并排居中对齐的示例代码：

HTML代码：

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

CSS代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

在上述代码中，通过设置.container的display属性为grid，并使用grid-template-columns: repeat(3, 1fr);来定义3列，并使用justify-content: center;和align-items: center;来实现水平和垂直居中对齐。.box表示每个div的样式，可以根据实际需求进行调整。

以上是使用Flexbox布局和Grid布局实现3个div并排居中对齐的方法。这两种布局方式都能够很好地适应不同屏幕尺寸和设备类型，提供灵活的布局效果。