html - 忽略垂直对齐 div 的 HTML 元素

Question

我的 div "inner_submit_data" 使用下面的代码在我的页面上垂直对齐。但是，如果我在此 div 下方包含更多 HTML 元素，它们会出现在我的页面顶部，就好像它们忽略了垂直对齐的 div 的存在。有没有办法让出现在垂直对齐的 div 之后的 HTML 元素显示在我的页面下方？我将在我的页面中添加大量动态内容，因此我认为绝对位置不是答案。

这是我的 HTML：

<div id="outer_submit_data">
    <div id="inner_submit_data">                     
        <h3 id="instruct">STEP #1: Upload your .csv file</h3>
        <div class="init_buttons" id="upfile1"></div>
        <br>
        <div class="init_buttons" id="upfile2">Continue</div> 
    </div>
</div>

和 CSS 使其垂直对齐：

#inner_submit_data {

    /* POSITION */
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 40%;
    margin: -10% 0 0 -20%;

    /* DIV DISPLAY PROPERTIES*/
    color: #fdf2e3;
    font-family: verdana,arial,sans-serif;

}