3个DIVs，1个容器，水平居中对齐

在前端开发中，实现3个DIVs水平居中对齐的方法有多种。以下是其中一种常用的方法：

使用Flexbox布局： Flexbox是一种强大的CSS布局模型，可以轻松实现元素的水平居中对齐。首先，创建一个容器元素，并将其设置为Flex布局。然后，将3个DIV元素作为容器的子元素，并使用Flex属性来控制它们的布局。

HTML代码：

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

CSS代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
}

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

推荐的腾讯云相关产品：腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

使用文本居中对齐：另一种方法是使用文本居中对齐的技巧。将容器元素设置为块级元素，并将其内部的DIV元素设置为行内块级元素。然后，将容器元素的文本对齐方式设置为居中。

HTML代码：

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

CSS代码：

.container {
  text-align: center; /* 水平居中对齐 */
}

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

推荐的腾讯云相关产品：腾讯云轻量应用服务器（Lighthouse）产品介绍链接地址：https://cloud.tencent.com/product/lighthouse

使用绝对定位和负边距：这种方法使用绝对定位和负边距来实现水平居中对齐。首先，将容器元素设置为相对定位。然后，将3个DIV元素设置为绝对定位，并使用负边距将它们水平居中对齐。

HTML代码：

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

CSS代码：

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 10px;
}

推荐的腾讯云相关产品：腾讯云云函数（SCF）产品介绍链接地址：https://cloud.tencent.com/product/scf