Q:

Center images horizontally and vertically with display:flex

I would like to center all images horizontally and vertically with display:flex (justify-content:center; align-content:center;) but it does not work - the images are still positioned at the top of the parent element. Any ideas?
https://dstruning.com/

A:

You cannot use flexbox in this scenario as you are absolute positioning. You need to set position: relative and set the height on the container and then absolute position the images.
Below is a snippet to study:

html,
body: {
  height: 100vh;
}

#center {    
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 600px;
    height: 400px;
    background: #000;
 }
 
 #imagesslider {
  position: relative;
  height: 100%;
 }
 
 #imagesslider > img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }
<div id="center">
  <div id="imagesslider">
    <img src="https://dstruning.com/img/05.png" style="width: 100px;z-index: 1"/>
    <img src="https://dstruning.com/img/03.png" style="width: 300px;"/>
  </div>
</div>

