CSS Usando la transformación CSS


Ejemplo

Las transformaciones de CSS se basan en el tamaño de los elementos, por lo que si no sabe cuán alto o ancho es su elemento, puede colocarlo absolutamente en un 50% desde la parte superior e izquierda de un contenedor relativo y traducirlo en un 50% hacia la izquierda y hacia arriba Para centrarlo verticalmente y horizontalmente.

Tenga en cuenta que con esta técnica, el elemento podría terminar siendo procesado en un límite de píxel no entero, lo que hace que se vea borroso. Ver esta respuesta en SO para una solución.

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
}

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

Ver ejemplo en JSFiddle

COMPATIBILIDAD DE NAVEGADOR CRUZADO

La propiedad de transformación necesita que los prefijos sean compatibles con los navegadores más antiguos. Se necesitan prefijos para Chrome <= 35, Safari <= 8, Opera <= 22, Android Browser <= 4.4.4 e IE9. Las transformaciones CSS no son compatibles con IE8 y versiones anteriores.

Aquí hay una declaración de transformación común para el ejemplo anterior:

-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera, Android */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
        transform: translate(-50%, -50%);

Para más información vea canIuse .

MÁS INFORMACIÓN

  • El elemento se posiciona de acuerdo con el primer elemento primario no estático ( position: relative , absolute o fixed ). Explora más en este violín y este tema de documentación .
  • Para el centrado solo horizontal, use left: 50% y transform: translateX(-50%) . Lo mismo ocurre con el centrado solo vertical: centro con la top: 50% y transform: translateY(-50%) .
  • El uso de elementos de anchura / altura no estáticos con este método de centrado puede hacer que el elemento centrado aparezca aplastado. Esto ocurre principalmente con elementos que contienen texto, y se puede arreglar agregando: margin-right: -50%; y margin-bottom: -50%; . Ver este violín para más información.