Bootstrap 3 图片水平垂直居中问题求助

老哥，我太懂你这种明明照着教程加了类，但图片还是死死钉在顶部的抓狂感！问题核心几乎都是父容器没有设置有效高度——Bootstrap的默认row和col本身是“包裹内容”的高度，没有足够的垂直空间，垂直居中自然无从谈起。下面给你两种亲测有效的解决办法，直接复制就能用：

方法一：用Bootstrap内置类快速实现 #

直接利用Bootstrap的Flex布局类，关键是给row设置占满视口的高度，再让每个col变成Flex容器控制居中：

<div class="container">
  <!-- 给row加min-vh-100，让它撑满整个浏览器视口高度 -->
  <div class="row min-vh-100"> 
    <!-- d-flex把col变成Flex容器，align-items-center垂直居中，justify-content-center水平居中 -->
    <div class="col-6 d-flex align-items-center justify-content-center">
      <img src="你的图片路径1.jpg" alt="图片1" class="img-fluid"> <!-- img-fluid保证图片响应式不溢出 -->
    </div>
    <div class="col-6 d-flex align-items-center justify-content-center">
      <img src="你的图片路径2.jpg" alt="图片2" class="img-fluid">
    </div>
  </div>
</div>

方法二：自定义Flex CSS（更灵活） #

如果需要更个性化的控制，自己写CSS也是一样的逻辑，核心还是给父级容器设置高度：

<style>
  /* 让row占满视口高度，同时让两个col高度一致 */
  .full-height-row {
    min-height: 100vh;
    display: flex;
    align-items: stretch;
  }
  /* 每个col作为Flex容器，实现图片的水平+垂直居中 */
  .centered-col {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* 确保图片不超出容器宽度 */
  .centered-col img {
    max-width: 100%;
    height: auto;
  }
</style>

<div class="container">
  <div class="row full-height-row">
    <div class="col-6 centered-col">
      <img src="你的图片路径1.jpg" alt="图片1">
    </div>
    <div class="col-6 centered-col">
      <img src="你的图片路径2.jpg" alt="图片2">
    </div>
  </div>
</div>

避坑提醒 #

• 一定要给row设置高度！如果row只有图片的高度，垂直居中是看不出效果的，因为容器本身就没有多余空间。
• 如果页面有固定导航栏，min-vh-100可能会被遮挡，可以改成min-height: calc(100vh - 导航栏高度)来调整。
• 图片记得加max-width:100%，避免超出col的宽度，保持页面响应式。

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