Teoría
Teoría

Centrado con transform: translate

Para centrar un bloque dentro de otro se suele utilizar un truco clásico que combina posicionamiento, coordenadas relativas y márgenes negativos.

Este método funciona bien si el bloque tiene dimensiones fijas. Si sus dimensiones pueden cambiar, aparecen dificultades.

Las transformaciones permiten centrar bloques de tamaño variable con la función translate.

En este ejemplo, los porcentajes de translateX se calculan respecto al ancho del propio elemento y los de translateY, respecto a su altura. left: 50% y top: 50% llevan su esquina superior izquierda al centro del contenedor; los desplazamientos de -50% hacen que sea el centro del elemento el que coincida con ese punto.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Centrado con transform: translate</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="world homeworld"> <div class="picture-frame large active"> <div class="picture"></div> </div> </div> </body> </html>

CSS

.picture { position: relative; width: 50%; height: 50%; }

ObjetivosRealizado

Asigna left: 50% al bloque .picture.
Añade top: 50%.
Después desplázalo -50% con translateX.
Desplázalo también -50% con translateY.