Cómo centrar cosas con estilo en CSS

Todos nos encontramos frustrados al centrar las cosas en CSS

Seamos honestos. A puntos en nuestras carreras de codificación, todos nos sentimos frustrados al centrar las cosas en CSS, y nos encontramos buscando cómo centrar un div dentro de un div en Google o Stack Overflow.

Debería ser una de las tareas más simples, pero puede volverse confusa a medida que agrega más elementos y estilos a su página.

Como es un problema común, he compilado una lista de formas para centrarse en CSS. También he incluido incrustaciones / enlaces con cada ejemplo que creé en CodePen. ¡Siéntase libre de bifurcar, compartir o copiar como desee!

Ver mis CodePens aquí.

Sin más preámbulos, ¡vamos a entrar!

Método de alineación de texto

El método "alinear texto: centro" es quizás el más común que verá para centrar. Se usa principalmente para centrar texto en su página HTML, pero también se puede usar para centrar divs.

El truco aquí es:

  1. adjunte el div que desea centrar con un elemento padre (comúnmente conocido como contenedor o contenedor)
  2. set text-align: center to parent parent
  3. luego configure el div interno para mostrar: bloque en línea

En mi ejemplo con el cuadrado azul, lo adjunto con otro div llamado contenedor cuadrado azul. Para centrar mi cuadrado azul, tuve que crear un elemento padre y establecer la propiedad de visualización de mi cuadrado azul en bloque en línea.

Esto se debe a que, de forma predeterminada, la propiedad de visualización de un div está configurada para bloquear, lo que significa que abarcará todo el ancho de la página. Al establecer la propiedad de visualización de mi cuadrado azul en bloque en línea, nos aseguramos de que el cuadrado azul solo abarque el ancho que he establecido, que es 100px.

Agregar varios elementos secundarios dentro del elemento primario (cuadrados azules en este ejemplo) los centrará a todos.

Método automático de margen

Otra forma común de centrar es usar el método de margen automático. Con este método, no necesitamos un elemento padre.

Simplemente podemos aplicar margin: 0 auto a nuestro cuadro amarillo, siempre que tengamos un ancho definido.

margen: 0 automático es la abreviatura para establecer los márgenes superior e inferior a cero, y los márgenes izquierdo y derecho a automático.

Esto es importante, porque sin el ancho de 100 píxeles que he definido, el navegador no podrá representar los márgenes izquierdo y derecho necesarios para centrar el cuadro amarillo. Al establecer el ancho, el navegador distribuirá automáticamente la cantidad correcta de margen a cada lado del cuadro amarillo.

La parte "0" se puede establecer en cualquier número de píxeles que desee para los márgenes superior e inferior.

Otro truco genial es configurar el margen izquierdo a automático o el margen derecho a automático, lo que nos permite empujar nuestro div hacia el lado derecho o izquierdo de la página, respectivamente. ¡Pruébalo!

Método de posicionamiento absoluto

El posicionamiento absoluto de un elemento nos permite ubicarlo esencialmente donde queramos en la página ... con un inconveniente.

El posicionamiento absoluto elimina el elemento del flujo de la página.

¿Porque es esto importante?

Bueno, es importante porque esto puede causar la superposición de elementos si se usa incorrectamente.

Si queremos centrar simplemente un elemento horizontalmente en la página, como lo hemos estado haciendo en los primeros dos métodos, hay tres pasos que debemos recordar:

  1. Establezca la propiedad de posición del elemento en absoluta
  2. Aplicar "left: 50%" al elemento
  3. Establezca un margen izquierdo de la mitad del ancho del elemento

En este ejemplo, usamos un cuadrado verde (¡qué hermoso verde!) Tiene el mismo tamaño que los otros ejemplos, por lo que nuestro ancho sigue siendo de 100 píxeles.

Como puede ver, le di "posición: absoluta" y apliqué "izquierda: 50%" a nuestro cuadrado verde. Esto le dice al navegador que mueva el borde izquierdo un 50% a la derecha.

Pero si está recreando este ejemplo, no queremos que el borde izquierdo esté en el medio, queremos que el centro del cuadrado se alinee con el centro de la página.

Esto nos lleva a nuestro último paso. Para alinear las cosas y compensar el espacio extra, aplicamos un margen a la izquierda de la mitad del ancho del cuadrado verde. En nuestro caso es de 50 píxeles (independientemente del ancho del elemento, siempre será la mitad).

Método de transformación / traducción

Hasta ahora solo nos hemos ocupado de centrar las cosas horizontalmente, pero ¿qué pasa si queremos poner algo justo en el medio de la página?

Centremos nuestro cuadrado rojo tanto horizontal como verticalmente.

Aunque este método también utiliza posicionamiento absoluto y "izquierda: 50%", también he aplicado dos propiedades más al elemento.

Al establecer la propiedad superior al 50% también, le digo al navegador que alinee el borde superior de nuestro cuadrado rojo con el centro de la página verticalmente. Pero como en el ejemplo anterior, no queremos que los bordes estén alineados con el centro, queremos que el centro de nuestro cuadrado encaje justo en la parte superior del centro de nuestra página.

Aquí es donde aplicamos una nueva propiedad llamada transform.

Hay muchas cosas interesantes que puede hacer con la transformación, como traducir, rotar y escalar animaciones, pero para este ejemplo, usaremos traducir.

Le damos a la propiedad de transformación "transform: translate (-50%, -50%)" y listo - ¡nuestro cuadrado rojo está centrado tanto horizontal como verticalmente!

Me encanta este método porque, independientemente del ancho o la altura de nuestro elemento, siempre estará en el centro de la página.

Este método se usa con frecuencia en el diseño receptivo y no requiere que se definan márgenes, como en el método de posicionamiento absoluto.

Método Flexbox

Si no está familiarizado con Flexbox, ¡está bien! Flexbox es un módulo de diseño que proporciona una forma más eficiente de alinear y colocar elementos en la página.

Si está interesado en aprender Flexbox (muy recomendable), Flexbox Froggy es una forma increíble y divertida de aprender (no afiliado, por supuesto, ¡es justo lo que solía aprender Flexbox!)

Los cuatro pasos para centrar horizontal y verticalmente con Flexbox son:

  1. El HTML, el cuerpo y el contenedor primario deben tener una altura del 100%
  2. Establecer la visualización para flexionar en el contenedor principal
  3. Establecer elementos de alineación para centrarse en el contenedor primario
  4. Establecer justify-content para centrarse en el contenedor primario

Establecer display para flex en el padre lo define como un contenedor de flex.

Al establecer elementos de alineación en el centro, estamos diciendo que los elementos secundarios o flexibles deben centrarse verticalmente dentro del elemento primario.

Justify-content funciona de la misma manera, pero en la dirección horizontal para nuestro ejemplo.

También me gusta usar este método porque, una vez más, es receptivo y no requiere ningún cálculo de margen.

Espero que hayas encontrado esta publicación informativa y útil. ¡Me encantaría escuchar tus comentarios!

¡Gracias por leer! :)

Aprendiendo JavaScript? ¡Esto puede ayudarte!