html - 无法将分层图像居中，有什么想法吗？

Question

我在将一对分层图像居中时遇到问题(在悬停时切换同一图像的前后)。为了将它们叠加在一起，我分别给了它们绝对类和相对类，现在我似乎无法让它们在页面流中居中，尽管对绝对元素使用了通常的居中技术。我试过文本对齐、对齐内容、调整边距等都无济于事。

有什么想法吗？

#GalleryThumbnails {
padding-bottom: 10em;
}


#crossfade {
position:relative;
height:281px;
}

#crossfade img {
position:absolute;
cursor: pointer;
border-radius: 10px;
transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
  -o-transition: opacity .25s ease-in;
}

#crossfade img.top:hover {
opacity:0;
}

<div id="GalleryThumbnails">
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
        </div>
  </div>
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
        </div>
 </div>

Answer 1

你可以使用 display: flex;

#GalleryThumbnails {
  padding-bottom: 10em;
}

#crossfade {
  position:relative;
  height:281px;
  display: flex;
  align-items: center;
  text-align: center;
  margin: auto;
  width: max-content;
}

#crossfade img {
  cursor: pointer;
  border-radius: 10px;
  transition: opacity .25s ease-in;
  -webkit-transition: opacity .25s ease-in;
  -moz-transition: opacity .25s ease-in;
  -o-transition: opacity .25s ease-in;
}
#crossfade img:last-child{
  position: absolute;
}

#crossfade img.top:hover {
  opacity:0;
}

<div id="GalleryThumbnails">
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
        </div>
  </div>
  <div class='Thumbnail'>
        <div id="crossfade">
            <img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
            <img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
        </div>
 </div>