Bootstrap 4中div内h3元素垂直对齐问题求助

嗨，我来帮你搞定这个垂直居中的问题！你提到用了justify-content-center实现了水平居中，但align-items-center没效果，核心问题大概率是flex容器缺少高度设置或者flex属性没应用到正确的层级上，咱们一步步来解决：

问题根源 #

Bootstrap的align-items-center是flex布局里的属性，它生效需要两个前提：

• 父元素必须是flex容器（加上d-flex类）
• 父元素要有明确的高度（比如固定高度、占满视口高度，不然垂直居中没有参照基准）

看你的代码结构，目前外层的.container加了d-flex justify-content-center，但没加align-items-center，也没设置高度；而且内层的.dim容器可能也没开启flex布局，导致垂直居中失效。

解决方案 #

根据你的需求，分两种常见场景给出修复代码：

场景1：让「NEW WAVE」在整个页面垂直+水平居中 #

如果想让内容在浏览器视口内完全居中，需要给最外层的.container补充高度和垂直居中属性：

<div class="container d-flex justify-content-center align-items-center" style="min-height: 100vh;">
  <div class="dim">
    <div class="new-wave">
      <h3>NEW WAVE</h3>
    </div>
  </div>
</div>

• min-height: 100vh让容器占满整个视口高度，给垂直居中提供基准
• 同时给.container加上align-items-center，就能实现整个容器内的内容垂直居中

场景2：让「NEW WAVE」在.dim容器内部垂直居中 #

如果只是要在.dim这个div里垂直居中，那需要给.dim开启flex布局、设置高度，并加上垂直居中属性：

<div class="container d-flex justify-content-center">
  <div class="dim d-flex justify-content-center align-items-center" style="height: 300px;">
    <h3>NEW WAVE</h3>
  </div>
</div>

• 给.dim加上d-flex justify-content-center align-items-center，把它变成flex容器并实现水平+垂直居中
• 必须给.dim设置具体高度（比如height: 300px），否则容器高度只会包裹内容，垂直居中看不到效果

额外提示 #

• 如果你的.dim容器已经有其他样式（比如背景图、padding等），可以用min-height代替固定height，避免内容溢出
• 检查是否有其他自定义CSS覆盖了Bootstrap的flex属性，比如设置了position: absolute或者float，这些会破坏flex布局

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