求助：如何在父div中居中多个独立的.item子div？

嘿，我一眼就揪出问题所在啦！你给.item设置了float: left，这个属性会让元素脱离正常文档流，直接把父元素text-align: center的效果完全抵消掉，而且你同时给.item加float和display: inline-block本身就是冲突的，这就是为啥之前的方案都不管用～

我给你两种可行的解决方案，你可以选适合自己的：

方案一：修复inline-block的方式 #

只需要调整.item的CSS，移除冲突属性，再处理一下inline-block的默认间隙：

#content {
  text-align: center;
  width: 100%;
  height: auto;
  border: 1px solid red;
  /* 加这个消除inline-block元素间的默认空白 */
  font-size: 0;
}

.email-prefs .item {
  width: 27.0%;
  /* 删掉float: left，这是罪魁祸首！ */
  margin: 0 1.15%; /* 可以加左右margin来控制间距 */
  line-height: 25px;
  color: #36383d;
  font-family: Helvetica, sans-serif;
  padding: 10px;
  display: inline-block;
  /* 删掉无效的margin: auto */
  border: 1px solid blue;
  /* 重新设置字体大小，覆盖父元素的font-size:0 */
  font-size: 14px;
  /* 让.item内部的内容左对齐，避免继承父元素的text-align:center */
  text-align: left;
}

.subscribe-options {
  clear: both;
  /* 给这个元素单独设置font-size，避免继承父元素的0 */
  font-size: 14px;
}

方案二：用Flexbox（更现代简洁的方式） #

现在Flexbox是布局的首选方案，代码更简洁，还不用处理烦人的空白间隙：

#content {
  width: 100%;
  height: auto;
  border: 1px solid red;
  /* 开启Flex布局 */
  display: flex;
  /* 允许换行 */
  flex-wrap: wrap;
  /* 水平方向居中 */
  justify-content: center;
  /* 可选：垂直方向对齐，根据你的需求调整 */
  /* align-items: center; */
}

.email-prefs .item {
  width: 27.0%;
  margin: 0 1.15%;
  line-height: 25px;
  color: #36383d;
  font-family: Helvetica, sans-serif;
  padding: 10px;
  border: 1px solid blue;
  /* 内部内容左对齐 */
  text-align: left;
}

.subscribe-options {
  /* 让这个元素占满整行，避免被Flex布局影响 */
  width: 100%;
  clear: both;
}

两种方案都能让你的.item子div在父容器里水平居中，选哪种都可以～Flexbox的方式更推荐，因为它的布局逻辑更清晰，适配性也更好。

内容的提问来源于stack exchange，提问作者Freddy