垂直对齐div内的元素[重复]

Question

在我的dim div 中垂直对齐我的h3 元素时遇到问题。

我尝试了一些方法，但似乎都没有。

这就是我所拥有的：

我希望“NEW WAVE”h3 在那个褪色的盒子内垂直居中，我设法将它与justify-content-center 水平对齐，但垂直的align-items-center 不起作用。

我正在使用 Bootstrap 4 顺便说一句。

这是我的 HTML 代码：

<div class="container d-flex justify-content-center">
    <div class="dim">
        <div class="new-wave d-flex justify-content-center align-items-center">
            <h3>NEW WAVE</h3>
        </div>
    </div>
</div>

Answer 1

请试试这个。

.new-wave.d-flex.justify-content-center.align-items-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Answer 2

您是否尝试将此 flex 类添加到父容器 - .dim - ？