垂直对齐div内的元素

Question

我无法在我的h3 div中垂直对齐我的dim元素。

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

这就是我所拥有的：

我希望“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 - ？