覆盖两个图像并在一个div中居中，仅CSS

Question

我正试图通过隐藏png来显示后面的gif来播放悬停上的gif。我可以在悬停状态下播放gif，问题是它不在div的中心。我在这里试过：

https://codepen.io/yumamri/pen/rNjyPpb

<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>

.static {
  position:absolute;
  background: white;
  margin: auto;
  display:block;
}

.static:hover {
  opacity:0;
}

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

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

Answer 1

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

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

Answer 2

您可以通过使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>