Text in center with responsive images

HTML-CSS
1

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.

http://jsfiddle.net/kb8c1rsv/

Any advice would be helpfull

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

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

5

Because parent container must have
position: relative

6

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

http://jsfiddle.net/beyondallmeadows/htnxpze4/16/

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

7

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.

http://jsfiddle.net/gf72v9u1/1/

8

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!