5 Maneras de Centrar un Div con CSS

Tabla de contenidos

Centrar elementos en una página web es una habilidad crucial para los desarrolladores web. El centrado es particularmente común al trabajar con elementos <div> en CSS. A continuación, exploraremos cinco maneras efectivas de centrar un div con CSS.

1. Margen Automático

El método más común para centrar un div horizontalmente es usando márgenes automáticos. Para lograr esto, simplemente establecemos los márgenes izquierdo y derecho a «auto» y la anchura del div a un valor específico o máxima. Por ejemplo:

Centrado por margin:auto
.div-explicacion-centrado {
  width: 300px;
height:100px;
  margin: 0 auto;
background:red;
}

2. Flexbox

La especificación de Flexbox ofrece una manera simple y poderosa de centrar elementos. Al aplicar display: flex al contenedor y justify-content: center y align-items: center al elemento hijo, podemos lograr un centrado vertical y horizontal sin esfuerzo.

Centrado por Flexbox
.contenedor-explicacion-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Grid

Otra opción de centrado es mediante CSS Grid. Al establecer el contenedor como un grid y usar place-items: center, el contenido se centrará tanto vertical como horizontalmente.

Centrado por Grid
.contenedor-grid {
  display: grid;
  place-items: center;
}

4. Position y Transform

Usando las propiedades position: absolute y transform, podemos centrar un elemento en relación a su contenedor padre, independientemente de su tamaño.

Centrado por position:absolute
.contenedor-explicacion-absoluto {
display: block;
position: relative;
height:400px;
}
.div-explicacion-absoluto-centrado{
width: 300px;
height:100px;
background:red;
text-align: center;
line-height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

5. Texto Centrado

Por último, si el contenido del div es texto, podemos centrarlo horizontalmente utilizando la propiedad text-align.

Centrado por position:absolute
.div-centrado-texto {
  text-align: center;
}
5 3 Votos
Article Rating
Suscribirte
Notificar de
guest
1 Comment
Lo más antiguo
Lo mas nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Luis Manuel
Luis Manuel
1 mes hace

Los ejemplos que mostraron fueron fáciles de entender y me ayudaron a aprender nuevas formas de hacerlo. Espero poder ver más publicaciones como esa para seguir aprendiendo.