HTML元素忽略垂直对齐div的存在

Question

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

这是我的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;

}