Having trouble centering layered images, any ideas?

Question

I'm having an issue centering a pair of layered images (before and after shots of the same image that switch on hover). In order to layer them on top of each other I gave them absolute and relative classes respectively, now I can't seem to get them to center in the page flow despite using the usual centering techniques for absolute elements. I've tried text align, align content, adjusting margins, etc. to no avail.

Any thoughts?

#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

Your #crossfade div should have display: table; and also one of your images should be position:relative;

See snippet below

#GalleryThumbnails {
padding-bottom: 10em;
}


#crossfade {
position:relative;
margin: 0 auto;
display: table;
}

#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;
}
.bottom{
  position: relative !important;
}
.top{
  left: 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>