¿Cómo centrar a los niños absolutamente posicionados de un contenedor flexible en Safari?

Tengo un contenedor que contiene tanto una imagen como texto. Quiero que el texto se centre vertical y horizontalmente en el centro de la imagen.

Parece que el método más fácil y progresista es usar Flexbox y el posicionamiento absoluto del texto:

.container { display: flex; justify-content: center; align-items: center; position: relative; } .text { position: absolute; } 
 
This should be centered

El texto está centrado en ambos ejes. Esto parece funcionar en todos los navegadores modernos … excepto Safari.

Safari parece no centrar el texto en absoluto. Simplemente está sentado en la parte superior / izquierda del contenedor como si un elemento normal y absolutamente posicionado estuviese en un diseño no flexible.

Safari (mal):

enter image description here

Todos los demás navegadores (correctos):

enter image description here

Pensé que Flexbox estaba realmente listo para el horario central, pero esto parece un factor decisivo teniendo en cuenta cuántas personas usan Safari en iOS. Centrar el contenido horizontal y verticalmente es algo en lo que Flexbox debería ser excelente.

Mi única alternativa real aquí es no usar Flexbox y luego usar:

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

Pero preferiría estar usando Flexbox por razones progresivas.

¿Hay algo que me falta aquí? Por mucho que odie preguntar, ¿hay algo de trabajo de Safari aquí? ¿Hay alguna solución a esto además de simplemente “no usar flexbox“, porque si esa es la respuesta a mediados de 2017, va a ser decepcionante.

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

Cuando se trata de Flexbox y posicionamiento absoluto, hay algunas cosas que hacer y no hacer, y en este caso, Safari no centrará un elemento de posición absoluta que los otros navegadores lo hagan.

Puede combinar Flexbox y transform: translate , ya que este último no afecta al primero, y cuando llega el momento, en el que todos se comportan igual con Flexbox solo, puede soltar la parte de transform / left / parte top .

 .container { display: flex; justify-content: center; align-items: center; position: relative; } .text { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 
 
This should be centered

Respetuosamente, hay algunas suposiciones erróneas en su pregunta:

  • “Safari (incorrecto): [imagen]” – Safari no es necesariamente incorrecto.
  • “Todos los demás navegadores (correctos): [imagen]” – Los otros navegadores no son necesariamente correctos.
  • “Pensé que Flexbox realmente estaba listo para el horario estelar …” – Lo es. El 98% de los navegadores son compatibles con flexbox .
  • “Centrar el contenido horizontal y verticalmente es algo en lo que Flexbox debería ser genial”. – Es.

¿Hay algo que me falta aquí?

Sí, la parte en la especificación en la que dice que los elementos flexibles colocados de forma absoluta ignoran las propiedades de flexión.

4.1. Posicionamiento absoluto de los niños flexibles

Un elemento secundario de un contenedor flexible colocado en posición absoluta no participa en el diseño flexible.

Si algunos buscadores eligen aplicar propiedades de flexión a los artículos flexibles posicionados de manera absoluta, esa es su elección. Pero si un navegador ignora las propiedades flexibles en dichos elementos, eso no necesariamente significa que están en violación de las especificaciones.

Al leer toda la sección en la especificación, no parece haber un claro acierto o error.

Para una solución más estable y confiable, no use propiedades de flexión para ubicar elementos de falta de flujo. Use las propiedades de posicionamiento de CSS en su lugar:

  • Centro de texto sobre una imagen en flexbox