SO-Center-Position-Absolute

Centering an element having postition absolute

by richierich25

HTML

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /></li>
      <li><img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
<!--           
<div class="image"><img src="https://source.unsplash.com/random/100*100?technology" alt="Dummy 1" /></div>
<div class="image"><img src="https://source.unsplash.com/random/101*101?technology" alt="Dummy 2" /></div>

CSS

body {
      text-align: center;
    }

    #slideshowWrapper {
      margin-top: 50px;
      text-align: center;
    }

    ul#slideshow {
      list-style: none;
      position: relative;
      margin: auto;
      display: flex;
      justify-content: center;
    }

    ul#slideshow li {
      position: absolute;
    }
    ul#slideshow li img {
      border: 1px solid #ccc;
      padding: 4px;
      height: 100px;
    }