0

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/

didi
  • 287
  • 1
  • 6
  • 16
  • Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) – Samuel Goldenbaum Nov 14 '19 at 18:16
  • Please see [answer](https://stackoverflow.com/a/8865463/62282) and many other examples of how to center using flex – Samuel Goldenbaum Nov 14 '19 at 18:17
  • sorry, but that is totally different. i have read a lot about flexbox but i don't find the failure... so it would be really nice if somebody could help me. – didi Nov 14 '19 at 18:30
  • 1
    I have posted the answer below, please in future post a minimal demo showing the problem and your code. – Samuel Goldenbaum Nov 14 '19 at 18:58

1 Answers1

0

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>
Samuel Goldenbaum
  • 18,391
  • 17
  • 66
  • 104
  • however, i had to add the styles to each img element separately - it did'nt work when i summarized the information. seems that it collided with my js code. – didi Nov 15 '19 at 08:05