如何在Bootstrap 4的div中实现图片绝对居中？

嘿，我懂你现在的烦恼——水平居中已经搞定，可垂直居中就是卡壳对吧？别慌，用Bootstrap 4自带的Flexbox工具类就能轻松解决，完全适配你用的v4.0.0-beta.3版本。

核心解决方案：借助Flex容器类实现双方向居中 #

Bootstrap 4本身基于Flexbox构建，我们只需要给包裹图片的父div（就是那个带border-section的div）添加几个内置类，就能同时实现垂直+水平居中，还能省去你原来的mx-auto和d-block：

• d-flex：将容器转换为Flex布局容器
• align-items-center：让容器内子元素沿垂直方向居中
• justify-content-center：让容器内子元素沿水平方向居中

修改后的完整代码 #

<style>
.border-section { border: 2px solid #D0D0D0; margin-top: 20px; }
</style>
<div class="container">
  <div class="row">
    <div class="col-sm-3 mr-4 border-section d-flex align-items-center justify-content-center" style="height:290px">
      <img class="img-fluid" src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" alt="View">
    </div>
  </div>
</div>

为什么这个方法可行？ #

在Bootstrap 4的Flex布局体系里，d-flex会让容器的子元素默认采用Flex布局规则，align-items-center负责交叉轴（垂直方向）的居中对齐，justify-content-center负责主轴（水平方向）的居中对齐，完美覆盖了你需要的双方向居中需求，而且代码更简洁，不需要额外自定义CSS。

如果因为特殊场景不想用Flex，也可以试试绝对定位方案（但更推荐Flex方法，更贴合Bootstrap的设计思路）：给父div加position-relative，给图片加position-absolute、top-50、left-50、transform-translate-middle类，不过这个方法在v4.0.0-beta.3里需要确认类名兼容性，还是Flex方案更稳妥。

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