Centrar las cosas es uno de los aspectos más difíciles de CSS.
Los métodos en sí mismos no suelen ser difíciles de entender. En cambio, se debe más al hecho de que hay muchas formas de centrar las cosas.
El método que utilice puede variar según el elemento HTML que intente centrar, o si lo está centrando horizontal o verticalmente.
En este tutorial, repasaremos cómo centrar diferentes elementos horizontalmente, verticalmente y tanto vertical como horizontalmente.
Cómo centrar horizontalmente
Centrar elementos horizontalmente es generalmente más fácil que centrarlos verticalmente. Aquí hay algunos elementos comunes que puede querer centrar horizontalmente y diferentes formas de hacerlo.
Cómo centrar texto con la propiedad CSS Text-Align Center
Para centrar el texto o los enlaces horizontalmente, simplemente use la text-alignpropiedad con el valor center:
Hello, (centered) World!
p { text-align: center; }
Cómo centrar una div con CSS Margin Auto
Utilice la marginpropiedad abreviada con el valor 0 autopara centrar elementos a nivel de bloque como divhorizontalmente:
.child { ... margin: 0 auto; }
Cómo centrar una div horizontalmente con Flexbox
Flexbox es la forma más moderna de centrar las cosas en la página y hace que diseñar diseños receptivos sea mucho más fácil de lo que solía ser. Sin embargo, no es totalmente compatible con algunos navegadores heredados como Internet Explorer.
Para centrar un elemento horizontalmente con Flexbox, simplemente aplique display: flexy justify-content: centeral elemento padre:
.container { ... display: flex; justify-content: center; }
Cómo centrar verticalmente
Centrar elementos verticalmente sin métodos modernos como Flexbox puede ser una verdadera tarea. Aquí repasaremos algunos de los métodos más antiguos para centrar las cosas verticalmente primero, luego le mostraremos cómo hacerlo con Flexbox.
Cómo centrar una división verticalmente con posicionamiento absoluto CSS y márgenes negativos
Durante mucho tiempo, esta fue la forma de centrar las cosas verticalmente. Para este método debes conocer la altura del elemento que deseas centrar.
Primero, establezca la displaypropiedad del elemento padre en relative.
Luego, para el elemento secundario, establezca la displaypropiedad en absolutey topen 50%:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; }
Pero eso realmente solo centra verticalmente el borde superior del elemento secundario.
Para centrar verdaderamente el elemento secundario, establezca la margin-toppropiedad en -(half the child element's height):
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically */ position: absolute; top: 50%; margin-top: -25px; /* half this element's height */ }
Cómo centrar una div verticalmente con Transform and Translate
Si no conoce la altura del elemento que desea centrar (o incluso si lo sabe), este método es un truco ingenioso.
Este método es muy similar al método de márgenes negativos anterior. Establezca la displaypropiedad del elemento padre en relative.
Para el elemento secundario, establezca la displaypropiedad en absolutey establezca topen 50%. Ahora, en lugar de usar un margen negativo para centrar verdaderamente el elemento secundario, simplemente use transform: translate(0, -50%):
.container { ... position: relative; } .child { ... position: absolute; top: 50%; transform: translate(0, -50%); }
Tenga en cuenta que translate(0, -50%)es una abreviatura de translateX(0)y translateY(-50%). También puede escribir transform: translateY(-50%)para centrar el elemento secundario verticalmente.
Cómo centrar una división verticalmente con Flexbox
Al igual que centrar las cosas horizontalmente, Flexbox hace que sea muy fácil centrar las cosas verticalmente.
Para centrar un elemento verticalmente, aplique display: flexy align-items: centeral elemento padre:
.container { ... display: flex; align-items: center; }
Cómo centrar tanto vertical como horizontalmente
Cómo centrar una división vertical y horizontalmente con posicionamiento absoluto CSS y márgenes negativos
Esto es muy similar al método anterior para centrar un elemento verticalmente. Como la última vez, debes conocer el ancho y alto del elemento que deseas centrar.
Establezca la displaypropiedad del elemento padre en relative.
Luego establezca la displaypropiedad del niño to absolute, topto 50%y leftto 50%. Esto solo centra la esquina superior izquierda del elemento secundario vertical y horizontalmente.
Para centrar verdaderamente el elemento secundario, aplique un margen superior negativo establecido a la mitad de la altura del elemento secundario y un margen izquierdo negativo configurado a la mitad del ancho del elemento secundario:
.container { ... position: relative; } .child { width: 50px; height: 50px; background-color: red; /* Center vertically and horizontally */ position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */ }
Cómo centrar una división vertical y horizontalmente con Transformar y trasladar
Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.
First, set the display property of the parent element to relative.
Next, set the child element's display property to absolute, top to 50%, and left to 50%.
Finally, use transform: translate(-50%, -50%) to truly center the child element:
.container { ... position: relative; } .child { ... position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
How to Center a Div Vertically and Horizontally with Flexbox
Flexbox is the easiest way to center an element both vertically and horizontally.
This is really just a combination of the two previous Flexbox methods. Then apply justify-content: center and align-items: center to center the child element(s) horizontally and vertically:
.container { ... display: flex; justify-content: center; align-items: center; }
That's everything you need to know to center with the best of 'em. Now go forth and center all the things.