Text in center with responsive images

I can’t figure it out how I would make a fully responsive centered text in my image divs.

The last attempt is also in my example fiddle, I tried to position it with absolute and try to change it with @media but that doesn’t work.


Any advice would be helpfull

.text {
  align-items: center;
  color: white;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
margin-left: auto;
margin-right: auto;

Well your example works for the first picture, when i use it for the next tree images.
It centers it in the middle image.


Because parent container must have
position: relative

I’m really missing something here I guess, because I doesn’t seem to work on my end.


I also don’t think it’s that complex? I just can’t seem to figure it out.

You are repeating a lot of CSS that does not need to be repeated. I saved a new version, it has a few comments as well.


Ok it works, but I am correct that this is not a css-grid move but more a flexbox approach? Whatever works for me is fine, just want to know for the future if this is a better approach to work with images and responsiveness. As I am more used to work with css grid.

Anyways thanks!