Cómo centrar un Div con CSS - 10 formas diferentes

by Janeth Kent Date: 21-07-2022 css


Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo.

Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un div. Exploraremos cómo centrar divs utilizando la propiedad CSS position, CSS Flexbox y CSS Grid.

Después de leer todo este artículo, estoy seguro de que empezarás a centrar divs como un profesional.

 

Cómo centrar un Div

 

En este tutorial, usaré el mismo HTML para todos los 10 métodos que comentaremos a continuación.

El HTML sólo contiene un div padre y un div hijo dentro de él.

El objetivo principal de este artículo es centrar el div interior con respecto a su padre. Sólo voy a cambiar los archivos CSS, pero podrás visualizar el funcionamiento de los 10 diferentes métodos.

El archivo HTML principal es el siguiente:

 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Centering divs</title>
    <link rel="stylesheet" href="./basicStyle.css" />
    <!-- Change the link of CSS file here -->
    <link rel="stylesheet" href="" />
    <style>
      * {
        box-sizing: border-box;
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="parentContainer">
      <div id="childContainer"></div>
    </div>
  </body>
</html>
 

Únicamente con el estilo básico que se indica en las siguientes líneas:

 
#parentContainer {
  width: 400px;
  height: 400px;
  background-color: #f55353;
}
#childContainer {
  width: 100px;
  height: 100px;
  background-color: #feb139;
}
 

Conseguiremos algo así:



como centrar un div
 

Simplemente creamos un div padre y le damos un ancho y un alto de 400px, y un color de #f55353.

Del mismo modo creamos un div hijo dentro de él y le damos un ancho y un alto de 100px y le damos un color de #feb139.

El objetivo final de este artículo será realizar esta transformación:



como centrar un div


 

Cómo centrar un Div usando la propiedad position de CSS

 

1. Cómo utilizar la posición: relative, absolute y top, left offset values

 
#parentContainer {
  position: relative;
}
#childContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 

La propiedad position en CSS establece cómo se posiciona el elemento en la página. El valor por defecto de la propiedad position es static. Los otros valores que toma la propiedad position son relative, absolute, fixed y sticky.

Ahora, cuando damos un position: absolute a un elemento del DOM, éste se convierte en absoluto con respecto a toda la página. Esto sería útil si quisiéramos centrar el div con respecto a toda la página.

Por otro lado, establecer el elemento padre en position: relative, hace que el elemento hijo (con position: absolute), se vuelva, relativo al elemento padre y no a toda la página.

En el ejemplo anterior hacemos precisamente eso. Le damos al elemento padre una position: relative y al hijo una position: absolute.

Junto con la propiedad position, podemos especificar otras cuatro propiedades: top, right, bottom y left, que determinan la posición final del elemento.

Las posiciones top y bottom especifican el posicionamiento vertical del elemento, mientras que left y right especifican el posicionamiento horizontal.

 

2. Cómo utilizar la posición relativa y absoluta, los valores de desplazamiento superior, izquierdo, derecho e inferior y el margin: auto

 
#parentContainer {
  position: relative;
}
#childContainer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
 

Continuando con nuestro conocimiento de las posiciones del punto 1 anterior, aquí utilizamos la propiedad margin en CSS.

margin: auto permite al navegador seleccionar un margen adecuado para el elemento hijo.

En la mayoría de los casos permite que el elemento hijo tome su ancho especificado y el navegador distribuye el espacio restante de forma equitativa entre los márgenes izquierdo y derecho entre los márgenes superior e inferior.

Si mencionamos sólo top: 0, bottom: 0 y margin: auto, el elemento hijo se centrará verticalmente.

Del mismo modo, si mencionamos sólo left: 0, right: 0 y margin: auto, el elemento hijo se centrará horizontalmente.

Si mencionamos todas las propiedades como se muestra en el bloque de código anterior, obtenemos un div perfectamente centrado tanto horizontal como verticalmente.

 

Cómo centrar un Div usando CSS Flexbox

 

3. Cómo utilizar Flexbox, justify-content y align-item

 

Los dos métodos anteriores se basan más en un método clásico de alineación de elementos en la página. Los enfoques modernos hacen uso de las propiedades Flexbox (para el maquetación unidireccional) y Grid layout (para el maquetación bidimensional más compleja).

Veamos el enfoque de Flexbox:

Flexbox no es sólo una propiedad, sino que es un módulo que comprende un conjunto de propiedades. Algunas de estas propiedades están pensadas para el container (es decir, el contenedor padre) y otras para los elementos hijos dentro de él.

El siguiente diagrama muestra una lista de propiedades que están destinadas a los elementos padre e hijo con respecto a Flexbox.



como centrar un div


 

Claramente, no es posible abarcar todas las propiedades en este artículo. Más bien vamos a ver algunas de las propiedades que estamos utilizando en este artículo. Como se mencionó anteriormente, hay dos entidades diferentes en el modelo Flexbox, el contenedor padre y el elemento hijo.

La propiedad display: flex define un contenedor como un contenedor flex. flex-direction es otra propiedad del contenedor padre que puede tomar cualquiera de los cuatro valores row (valor por defecto), row-reverse, column y column-reverse.

Cuando se trabaja con Flexbox, tenemos que tener en cuenta dos ejes diferentes, que son el eje principal y el eje transversal.

Para los casos en que flex-direction es row o row-reverse, el eje horizontal es el eje principal y el eje vertical es el eje transversal.

Del mismo modo, cuando la flex-direction es column o column-reverse, entonces el eje vertical es el eje principal y el eje horizontal es el eje transversal.

La propiedad justify-content del contenedor padre define la alineación de sus hijos a lo largo del eje principal. Así, justify-content: center establece la alineación de todos sus elementos hijos en el centro con respecto al eje principal.

Del mismo modo, la propiedad align-items del contenedor padre define la alineación de sus hijos a lo largo del eje transversal. Así, align-items: center establece la alineación de todos sus elementos hijos en el centro con respecto al eje transversal.

Así que el bloque de código que se muestra a continuación alineará perfectamente nuestro elemento hijo en el centro del elemento padre tanto vertical como horizontalmente.

En este método, no necesitamos especificar nada explícitamente para el elemento hijo. display: flex, justify-content y align-items manejan todo desde el componente padre.

 
#parentContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}



 

4. Cómo utilizar en Flexbox, justify-content y align-self

 

Este método es sólo una alternativa al método anterior y es bastante similar a él.

Pero en lugar de utilizar la propiedad align-items (en la propiedad del contenedor padre), que establece la alineación para todos los elementos hijos con respecto al eje transversal, utilizamos align-self (en los elementos hijos) que establece la alineación de los elementos flex individuales en el eje transversal.

 
#parentContainer {
  display: flex;
  justify-content: center;
}
#childContainer {
  align-self: center;
}



 

5. Cómo utilizar Flexbox y margin: auto

 

Flexbox nos proporciona unas capacidades de alineación y distribución del espacio muy potentes. También, como se mencionó anteriormente, margin: auto permite al navegador seleccionar un margen adecuado para el elemento hijo.

En la mayoría de los casos permite que el elemento hijo tome su ancho especificado y el navegador distribuye el espacio restante de manera equitativa entre el par de márgenes izquierdo y derecho o el par de márgenes superior e inferior o entre ambos pares.

Esto significa que establecer el contenedor padre como flex y dar al hijo un margen: auto permite al navegador distribuir uniformemente el espacio sobrante a lo largo de las direcciones vertical y horizontal.

 
#parentContainer {
  display: flex;
}
#childContainer {
  margin: auto;
}


 

Cómo centrar un Div usando CSS Grid

 

6. Cómo utilizar en Grid, justify-content y align-items

CSS Grid o simplemente Grid se utiliza para el diseño bidimensional en comparación con Flexbox que se utiliza para el diseño unidimensional.

Al igual que Flexbox, tenemos el concepto de un contenedor de cuadrícula o contenedor padre y elementos de cuadrícula o elementos hijos.

El siguiente diagrama enumera todas las propiedades que se pueden utilizar para el padre y los hijos. Como CSS Grid es un tema enorme en sí mismo, no es el propósito de este artículo hablar de todas y cada una de las propiedades. Así que vamos a comentar las propiedades que vamos a utilizar en este artículo.



como centrar un div


 

display: grid hace que un elemento se convierta en un contenedor de rejilla.

justify-items y align-items alinean los elementos dentro de la rejilla a lo largo del eje de la línea ( row) y del bloque ( column) respectivamente.

Por otro lado, si el tamaño total de la rejilla es menor que el contenedor de la rejilla (lo que puede ocurrir si todos los elementos de la rejilla tienen un tamaño con unidades no flexibles como px), entonces en ese caso podemos controlar la alineación de la rejilla dentro del contenedor de la rejilla utilizando justify-content y align-content.

justify-content y align-content alinean la rejilla a lo largo del eje de la línea ( row ) y del eje del bloque ( column ) respectivamente.

En nuestro caso sólo hay una celda de la rejilla y un solo elemento hijo dentro de ella, por lo que podemos usar justify-content o justify-items así como align-content o align-items indistintamente y obtener el mismo resultado.

 
#parentContainer {
  display: grid;
  justify-content: center;
  align-items: center;
}



 

7. Cómo utilizar Grid y place-items

 

Puede utilizar place-items para establecer las propiedades align-items y justify-items en la misma declaración. Del mismo modo, place-content establece tanto justify-content como align-content en la misma declaración.

Como se ha mencionado anteriormente, en este caso de uso podemos usar justify-content o justify-items así como align-content o align-items indistintamente. Del mismo modo, también podemos utilizar indistintamente place-items o place-content y obtener el mismo resultado (específicamente para este caso de uso. Para cualquier otro caso de uso hay que analizar qué propiedad se debe utilizar).

 
#parentContainer {
  display: grid;
  place-items: center;
}



 

8. Cómo usar Grid, align-self y justify-self

 

Al igual que Flexbox, Grid también admite la alineación individual de los elementos de la cuadrícula mediante las propiedades align-self y justify-self (propiedades que deben especificarse en el elemento children).

justify-self alinea los elementos de la rejilla dentro de una celda de la rejilla a lo largo del eje de la línea (row), mientras que align-self alinea los elementos de la rejilla dentro de la celda de la rejilla a lo largo del eje de la columna.

 
#parentContainer {
  display: grid;
}
#childContainer {
  align-self: center;
  justify-self: center;
}



 

9. Cómo utilizar Grid y place-self

 

La propiedad place-self permite establecer las propiedades justify-self y align-self en una sola declaración. Por lo tanto, si se asigna a un elemento hijo la propiedad place-self: center se centra el hijo tanto vertical como horizontalmente.

 
#parentContainer {
  display: grid;
}
#childContainer {
  place-self: center;
}



 

10. Cómo usar Grid y margin: auto

 

De forma similar a Flexbox, Grid también nos ofrece una potente capacidad de alineación y distribución del espacio.

Como vimos en el punto 5, podemos hacer un proceso similar con Grid en lugar de usar Flexbox y obtendremos el mismo resultado si asignamos margin: auto al elemento hijo.

 
by Janeth Kent Date: 21-07-2022 css visitas : 691  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Artículos relacionados

Como hacer tu propio cursor personalizado para tu web

Cuando empecé a ojear webs distintas y originales para aprender de ellas, de las primeras cosas que me llamaron la atención fue que algunas de ellas tenían sus propios cursores,…

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un…

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura…

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración