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;

}