div消失时CSS不居中

Question

你好，我正试图将屏幕中间的一个div放在移动设备上消失的两个div之间。我可以在加载div时将其居中，但当我用新的div替换它们时，中间的div会位于顶部。

#container{
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
animation: 1s ease-out 0s 1 fadeIn;
}
.middle {
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
position: absolute;
display: flex;
}

<div class="middle">
<p id="middle">VS</p>
<p id="middle-circle"></p>
</div>
<div id="container" >
<div class="box">image</div>
<div class="box">image</div>
</div>

Answer 1

不太清楚你在问什么，但如果你把整个想法包装在一个大容器中，并添加一个小css，下面应该可以了，。

#container {
text-align: center;
display: flex;
align-items: flex-end;
justify-content: center;
animation: 1s ease-out 0s 1 fadeIn;
}
.middle {
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%);
position: absolute;
display: flex;
}
#big{
height:100vh;
display:relative;
}

<div id ='big'>
<div class="middle">
<p id="middle">VS</p>
<p id="middle-circle"></p>
</div>
<div id="container">
<div class="box">image</div>
<div class="box">image</div>
</div> 
</div>