html - 带表格单元格的 Div 只能使用 1 次

Question

当我用 display:table-cell 制作一个 div 时；它显示像第一张图片。 (这就是我想要的)但是当我添加另一个 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;
}