Bootstrap 3.3.7中无法将图片垂直居中于.col-md-12容器

嘿，我太懂你这种折腾半天垂直居中却没效果的挫败感了——Bootstrap 3.3.7确实没有后来版本那么多现成的flex工具类，得用点传统CSS技巧来搞定。你之前试的.center-block本来就只负责水平居中，垂直方向完全没作用；.frame类的方法可能没抓对核心要点，比如容器高度的设置。

给你两个亲测有效的方案，根据你的场景选就行：

方案一：表格布局法（适合固定高度容器） #

这个方法兼容性拉满，适合容器高度固定的情况，能同时实现水平+垂直居中：

首先给你的.col-md-12容器加个自定义类，比如vertical-center-wrap，然后在图片外面套一层容器，用表格单元格的垂直对齐特性来实现居中：

<div class="col-md-12 vertical-center-wrap">
  <div class="center-content">
    <img src="your-image-path.jpg" alt="描述图片">
  </div>
</div>

对应的CSS：

.vertical-center-wrap {
  display: table;
  width: 100%;
  height: 400px; /* 这里替换成你需要的容器高度，比如100%继承父容器高度 */
}

.center-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* 顺带实现水平居中 */
}

方案二：绝对定位+transform法（适配动态高度） #

如果你的容器高度不固定，或者不想用表格布局，可以试试这个方法，靠定位和位移来精准居中：

先给.col-md-12加上Bootstrap自带的.relative类（开启相对定位），然后给图片加个自定义类：

<div class="col-md-12 relative">
  <img src="your-image-path.jpg" alt="描述图片" class="absolute-center">
</div>

对应的CSS：

.relative {
  min-height: 300px; /* 必须给容器一个最小高度，不然容器会塌陷成图片高度，看不出垂直效果 */
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

关键提醒 #

你之前没成功的核心原因大概率是容器没有设置明确的高度——垂直居中的前提是容器有可计算的高度，不然浏览器不知道“居中”的参照基准是什么。如果你的.col-md-12是嵌套在某个父容器里，记得给父容器也设置高度，或者让.col-md-12用height: 100%;继承父容器高度。

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