How to center absolutely positioned children of a flexible container in Safari?

Question

I have a container containing both an image and some text. I want the text to be vertically and horizontally centered in the middle of the image.

It seems that the easiest, most promising method is to use Flexbox and absolute text positioning:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  position: absolute;
}

<div class='container'>
  <div class='text'>
    This should be centered
  </div>
  <img src="https://placehold.it/250x250" />
</div>

Run codeHide result

The text is centered on both axes. This seems to work in all modern browsers ..... except Safari.

Safari doesn't seem to focus text at all. It just sits on the top / left side of the container, like a regular absolutely positioned element, located in the flexbox layout.

Safari (wrong):

All other browsers (correct):

, Flexbox -, , , Safari iOS. - , Flexbox .

- Flexbox, :

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

Flexbox .

-, ? , , Safari? - , " flexbox", 2017 , .

JSFiddle : https://jsfiddle.net/z7kh5Laz/4/

Answer 1

Flexbox , , , Safari , .

Flexbox transform: translate, , , Flexbox, transform/left/top.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

<div class='container'>
  <div class='text'>
    This should be centered
  </div>
  <img src="https://placehold.it/250x250"/>
</div>

Hide result

Answer 2

, :

• "Safari (): [image]" - Safari .
• " (): [image]" - .
• " , Flexbox -.." - . 98% flexbox.
• " - , Flexbox ". - .

-, ?

, , , flex flex.

4.1. - Flex

- flex .

, . , , .

, , .

. CSS:

• flexbox