Mi Blog
Cómo centrar horizontalmente un div

Cómo centrar horizontalmente un div

  html css div
 

Centrar un div horizontalmente es una de las tareas más comunes en desarrollo web, pero puede hacerse de diferentes maneras según el contexto y las tecnologías utilizadas. Ya sea que trabajéis con CSS clásico, Flexbox o Grid, es importante conocer las opciones disponibles para elegir la más adecuada según vuestro proyecto.

Seguid leyendo y os enseñaré a centrar un div horizontalmente en vuestras páginas utilizando CSS y Flex...

 

 

¿QUÉ ES UN DIV?

Un <div> en HTML es un contenedor genérico que se utiliza para agrupar otros elementos y aplicarles estilos o comportamientos comunes. Su nombre proviene de "division" (división), ya que sirve para dividir y organizar el contenido de una página web.

Características principales de un <div>:

  • No tiene un estilo propio por defecto: Un <div> no afecta la apariencia del contenido a menos que se le apliquen estilos mediante CSS.
  • Contenedor flexible: Se usa para agrupar otros elementos como texto, imágenes, formularios, etc.
  • Clave para el diseño web: Es ampliamente utilizado para estructurar páginas web, especialmente en combinación con CSS y frameworks como Bootstrap.
  • Comportamiento por defecto: Es un elemento de bloque (block-level), lo que significa que ocupa todo el ancho disponible de su contenedor.

 

Ventajas de usar <div>:

  • Organiza el contenido de forma lógica.
  • Facilita la aplicación de estilos y scripts a grupos de elementos.
  • Permite crear diseños complejos con CSS (como layouts, grids, etc.).
  • Es compatible con cualquier navegador.

 

Aunque es muy útil, en HTML5 se recomienda usar etiquetas semánticas como <header>, <section>, <article> o <footer> cuando el contenido tiene un propósito específico, en lugar de depender únicamente de <div>.

 

 

Web Oficial: https://dev.azure.com

 

 

Centrar un div horizontalmente a veces nos presenta algunos problemas.

 

 

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

  • Un equipo cualquiera con Windows, GNU/Linux o MacOS
  • Editor de texto o un IDE
  • Navegador web

 

 

2.- CENTRAR DIV HORIZONTALMNTE

Existen múltiples opciones de centrar un div horizontalmente en una página web. Os mostraré dos de las que me resultan más sencillas de entender y que menos código y problemas presentan. Además, son 100% compatibles con cualquier dispositivo.

 

 

2.1.- CENTRAR DIV HORIZONTALMENTE - OPCIÓN 1

Para este caso crearemos, como es habitual, un div contenedor padre (#container1) y dentro de él crearemos el div hijo (#child1) centrado horizontalmente:

<div id="container1">
<div id="child1">Opción 1: Div centrado horizontalmente.</div>
</div>

 

Explicación:

  • #container1: Es el contenedor principal (padre), que envuelve al div interior.
  • #child1: Es el div hijo que contiene el texto "Opción 1: Div centrado horizontalmente.".

 

 

El código para los 2 div será el siguiente:

#container1 {
border: 1px solid blue;
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0px 20px 0px;
}
#child1 {
border: 1px solid forestgreen;
padding: 10px;
}

 

 Explicación del código CSS para el #container1:

  • border: 1px solid blue; Agrega un borde azul de 1 píxel alrededor del contenedor para hacerlo visible.
  • width: 100%; El contenedor ocupa todo el ancho del elemento padre (como la ventana del navegador si no hay un contenedor más grande).
  • display: flex; Convierte a #container1 en un contenedor flex, lo que permite alinear y distribuir sus elementos hijos (#child1) con las propiedades de Flexbox.
  • justify-content: center; Centra horizontalmente al hijo (#child1) dentro del contenedor.
  • padding: 20px 0px 20px 0px; Añade 20 píxeles de espacio interno arriba y abajo (top y bottom).

 

Explicación del código CSS para el #child1:

  • border: 1px solid forestgreen; Añade un borde verde alrededor del div hijo, diferenciándolo visualmente del contenedor.
  • padding: 10px; Agrega un espacio interno de 10 píxeles entre el borde de #child1 y su contenido (el texto).

 

 

Centrar div horizontalmenteDiv centrado horizontalmente - Opción 1

 

 

2.2.- CENTRAR DIV HORIZONTALMENTE - OPCIÓN 2

En este otro caso, la estructura será exactamente igual que en el primer ejemplo. Crearemos el div contenedor padre (#container2) y dentro de él crearemos el div hijo (#child2) centrado horizontalmente:

<div id="container2">
<div id="child2">Opción 2: Div centrado horizontalmente.</div>
</div>

 

Explicación:

  • #container2: Es el contenedor principal (padre), que envuelve al div interior.
  • #child2: Es el div hijo que contiene el texto "Opción 2: Div centrado horizontalmente.".

 

El código para los 2 div será el siguiente:

#container2 {
border: 1px solid blue;
width: 100%;
padding: 20px 0px 20px 0px;
}
#child2 {
display: table;
margin: 0 auto;
border: 1px solid forestgreen;
padding: 10px;
}

 

Explicación del código CSS para el #container2:

  • border: 1px solid blue; Agrega un borde azul de 1 píxel alrededor del contenedor para hacerlo visible.
  • width: 100%; El contenedor ocupa todo el ancho del elemento padre (como la ventana del navegador si no hay un contenedor más grande).
  • padding: 20px 0px 20px 0px; Añade 20 píxeles de espacio interno arriba y abajo.

 

Explicación del código CSS para el #child2:

  • display: table; Hace que el elemento hijo (#child2) se comporte como una tabla. Esto habilita propiedades como margin: auto para centrar el elemento.
  • margin: 0 auto; Centra horizontalmente el elemento (#child2) dentro del contenedor (#container2), siempre que el elemento tenga un ancho definido o su comportamiento lo permita (como en este caso con display: table).
  • border: 1px solid forestgreen; Agrega un borde verde alrededor del div hijo para destacarlo visualmente.
  • padding: 10px; Agrega un espacio interno de 10 píxeles entre el borde de #child2 y su contenido (el texto).

 

Centrar div horizontalmenteDiv centrado horizontalmente - Opción 2

 

 

 

3.- EXPORTAR LA CONFIGURACIÓN COMPLETA

A continuación, os dejo el código de los 2 ejemplos anteriores en un mismo html. Tenéis también abajo un link a la demo online y el fichero html adjunto por si queréis revisarlo:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DIV centrado</title>
<meta name="description" content="Cómo centrar un DIV horizontalmente">
<meta name="author" content="Raúl Prieto Fernández">
<!-- Favicon -->
<link rel="icon" href="https://www.raulprietofernandez.net/favicon.ico" type="image/x-icon">
<!-- CSS Style -->
<style>
body {
background-color: aliceblue;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
text-align: center;
}
.c {
text-align: center;
}
#container1 {
border: 1px solid blue;
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0px 20px 0px;
}
#child1 {
border: 1px solid forestgreen;
padding: 10px;
}
#container2 {
border: 1px solid blue;
width: 100%;
padding: 20px 0px 20px 0px;
}
#child2 {
display: table;
margin: 0 auto;
border: 1px solid forestgreen;
padding: 10px;
}
footer {
margin-top: 100px;
text-align: center;
}
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Cómo centrar un DIV horizontalmente</h1>
</header>

<!-- Main Content Section -->
<main>
<section>
<div id="container1">
<div id="child1">Opción 1: Div centrado horizontalmente.</div>
</div>
</section>

<p style="height:150px"> </p>

<section>
<div id="container2">
<div id="child2">Opción 2: Div centrado horizontalmente.</div>
</div>
</section>
</main>

<p class="c">
<a href="https://www.raulprietofernandez.net/blog/programacion/como-centrar-horizontalmente-un-div-dentro-de-otro">Ver artículo original.</a>
</p>

<!-- Footer Section -->
<footer>
<p>Made with <span style="color:red">♥</span> by Raúl Prieto Fernández.</p>
</footer>

</body>
</html>

 

 

DEMO ONLINE

Centrar div horizontalmentePágina con 2 divs centrados horizontalmente

  

 

ENJOY!


Raúl Prieto Fernández

Sitio Web: raulprietofernandez.net

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.