垂直对齐不与表格显示

Question

我已经在网上搜索了这个问题的大量解决方案，但我无法解决我的问题。

我正在尝试在其父级中垂直对齐div，我的标记可以在下面看到：

   <div class="section-content row">
       <div class="column grid_6">
            <h1 style="">amazing new content</h1>
            <p>here is some description</p>
       </div>
       <div class="column grid_6">
            <div class="video_overlay">
                <div class="button">
                    <a href="#"><i class="fa fa-play-circle"></i></a>
                </div>
            </div>
            <figure>
                <img src="./public/img//sections/cam_5.png"/>
            </figure>
       </div>
    </div>

CSS：

.section-content {
   margin: 0 auto;
   width: 100%;
   max-width: 1680px !important;
}

.row {
   display: table !important;
   z-index: 2;
}

.row::after {
    clear: both;
}

.row:before,
.row:after {
   content: "";
   height: 100%;
}

.column {
   margin: 0 auto;
   display: table-cell;
   vertical-align: middle;
}

我想通过将.column显示为一个表格单元并在.row表中垂直对齐它，它应该垂直对齐孩子，但它似乎没有。

当我在浏览器上查看检查员时，父母的身高为500，孩子的身高为200，所以我不明白为什么它没有对齐。

任何帮助将不胜感激。