带红色边框的div水平居中失效，图片垂直居中正常，求解决方案

嘿，我发现你的问题啦——红色边框的div没实现水平居中，但图片垂直居中已经生效了，先给你点个赞！问题的核心在于你用的display: table-cell属性，它会让margin: 0 auto这个水平居中的样式完全失效，因为表格单元格的布局逻辑和普通块级元素不一样，而且center-block类（如果是Bootstrap的）也只对块级元素生效。

下面给你两种可行的解决方案，你可以根据需求选：

方案一：保留table-cell布局，新增父容器实现水平居中 #

我们给红色边框的div套一个display: table的父容器，让父容器来承担水平居中的任务，内部div继续用table-cell实现垂直居中：

修改后的CSS #

.vcenter-wrapper {
  display: table;
  height: 500px;
  width: 500px;
  margin: 0 auto; /* 让整个容器水平居中 */
  border: 1px solid red;
}
.vcenter {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 让图片在单元格内水平居中 */
}

修改后的HTML #

<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
  <h2>xyz</h2>

  <div class="vcenter-wrapper">
    <div class="vcenter">
      <img src="" alt="Cinque Terre" width="304" height="236">
    </div>
  </div>

</div>

方案二：用Flexbox实现（更推荐，代码更简洁） #

Flexbox是现在前端布局的主流方案，能一次性搞定水平+垂直居中，不需要额外嵌套：

修改后的CSS #

.center-container {
  height: 500px;
  width: 500px;
  border: 1px solid red;
  margin: 0 auto; /* 实现容器自身水平居中 */
  display: flex;
  justify-content: center; /* 内部元素水平居中 */
  align-items: center; /* 内部元素垂直居中 */
}

修改后的HTML #

<div class="text-center" style="border: 1px solid black;padding-bottom:10px; width:100%;height:100%;">
  <h2>xyz</h2>

  <div class="center-container">
    <img src="" alt="Cinque Terre" width="304" height="236">
  </div>

</div>

这个方案不需要额外的嵌套层级，代码更清爽，兼容性也覆盖了绝大多数现代浏览器，非常推荐使用~

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