带表格单元的Div只能工作1次

Question

当我用显示器创建一个div：table-cell;它显示像第一张照片。 （这是我想要的）但是当我添加另一个div时，它看起来像第二张图片。我只想在第一个div下面的div中间的文本。

这是我的代码

<div id="container">

<div id="over_asero">
    <p id="titel_text"> </p>

    <p id="sub_text"></p>

    <p id="sub_text"></p>
</div>

<div id="veiligheid">
    <p id="titel_text"> </p>

    <p id="sub_text"></p>

    <p id="sub_text"></p>
</div>

#container
{
position: relative;
width: 1140px;
height: 1500px;
margin: auto;
background-color: red;
}

#over_asero
{
position: relative;
width: 1140px;
height: 400px;
top: 150px;
z-index: 2;
display: table-cell;
vertical-align: middle;
}
#over_asero p
{
color: white;
font-family: 'Open Sans', sans-serif;
}
#titel_text
{
font-size: 16px;
}
#sub_text
{
font-size: 12px;
}

#veiligheid
{
position: relative;
width: 1140px;
height: 400px;
top: 550px;
z-index: 2;
background-color: blue;
display: table-cell;
vertical-align: middle;
}

Answer 1

用父div覆盖table-cell div并为其添加显示表，如下所示

<div class="parent_div">
   <div id="over_asero"></div>
</div>

<div class="parent_div">
   <div id="veiligheid"></div>
</div>

.parent_div{
  display: table;
}