Truco rápido de CSS: cómo centrar un objeto exactamente en el centro | Programar Plus

Recientemente, necesitaba crear una página de marcador de posición para un sitio. Quería que la imagen del logotipo estuviera centrada exactamente en el medio de la pantalla, es decir, centrada tanto vertical como horizontalmente. Rápidamente, pensé en darle al elemento de imagen una clase de “centrado” y luego darle estilo a esa clase:

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

Pero como estoy seguro de que está pensando, esto no funciona del todo. Lo que logra es colocar la esquina superior izquierda de la imagen exactamente en el centro de la página, no el centro de la imagen en el centro de la página.

not-centrado.gif

Para que la imagen esté exactamente centrada, es una simple cuestión de aplicar un margen superior negativo de la mitad de la altura de la imagen y un margen izquierdo negativo de la mitad del ancho de la imagen. Para este ejemplo, así:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Eso hará el truco:

centrado.gif

Esto funciona de maravilla cuando conoce el tamaño de la cosa que está centrando. Si no lo sabe, o está pensando que podría cambiar y quiere estar preparado para el futuro, intente esto:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

El translate valor por transform se basa en el tamaño del elemento, por lo que se centrará bien.