Translate

La solución elegante al problema de centrado

Durante años, centrar un elemento de tamaño desconocido en CSS fue uno de los mayores dolores de cabeza en el desarrollo frontend. Si no sabías exactamente cuántos píxeles medía el elemento, era prácticamente imposible centrarlo con precisión usando solo top y left.

Había que usar margin negativo, pero ese valor era fijo. Si el elemento cambiaba de tamaño por el contenido, el centrado se rompía. Flexbox resolvió muchos casos, pero no todos, especialmente en el posicionamiento absoluto.

La solución definitiva llegó con translate() y el uso estratégico de porcentajes.

Movimiento en dos ejes simultáneos

translate(x, y) es simplemente una versión combinada de translateX() y translateY() en una sola función. El primer valor controla el eje horizontal y el segundo el vertical:

/* Equivalencias exactas */
transform: translate(50px, 30px);
/* = translateX(50px) translateY(30px) */

El truco del centrado perfecto

Ahora viene la técnica que todo desarrollador frontend debe memorizar. Es sencilla, pero cambia por completo la forma en que piensas sobre el posicionamiento:

Si pones un elemento en position: absolute con top: 50% y left: 50%, el navegador coloca la esquina superior izquierda del elemento exactamente en el centro de su contenedor. Eso no es lo que quieres.

Si añades transform: translate(-50%, -50%), el elemento se mueve hacia la izquierda un 50% de su propio ancho y hacia arriba un 50% de su propia altura. Como recordarás, los porcentajes en transform son relativos al propio elemento, no al padre. Esto lo coloca perfectamente centrado, sin importar cuánto mida.

.elemento-centrado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* La clave */
}

Tooltips: el caso de uso más común

Los tooltips (las pequeñas burbujas de texto que aparecen al hacer hover sobre un icono) son probablemente el caso de uso más frecuente de esta técnica. El tooltip necesita aparecer centrado horizontalmente sobre su elemento padre, sin importar cuánto texto contenga. Si el texto cambia, el centrado debe mantenerse automáticamente.

La solución es colocar el tooltip con left: 50% y luego moverlo con translate(-50%, 0) para que su centro quede alineado con el centro del padre.

Diferencia clave con top y left

• top/left: Mueven la posición del elemento en el flujo del documento, lo que puede afectar al layout. No son amigables para la GPU.
• translate(): Mueve únicamente la representación visual del elemento, sin tocar el layout. La GPU lo maneja eficientemente.