您可以通过使image_container div具有一个位置：相对位置，并将其中的图像添加到中心浮动位置来获得您希望的效果，如果您尝试对齐它们，它们将不会重叠或在彼此之上。

我修改了您的代码，希望这能有所帮助：

null

.image_container {
 position: relative;
 min-height: 520px;
 width: 333px;
 display: block;
 margin: 0 auto;
}
.static {
  position:absolute;
  background: white;
  margin: auto;
  display:block;      
  z-index: 2;
}

.static:hover {
  opacity:0;
}

.active {
    display: block;
    margin: auto;        
}

.static, .active {
    height: 500px;
    padding: 10px;
    background-color: #EF233C;
}

<h2>
  Animation
</h2>
<div class="image_container">
  <img class="static" src="https://images.pexels.com/photos/5478103/pexels-photo-5478103.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  <img class="active" src="https://images.pexels.com/photos/6329084/pexels-photo-6329084.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

你想居中的是什么？“图像容器”？如果这样做

.image_container{
 display: flex;
 flex-direction:column or row (if needed);
 justify-content: center;
 align-items: center;
 height: 100vh
}