Cómo centrar un div en Bootstrap horizontal y verticalmente?

Para centrar divs con Bootstrap textos, botones, forms usamos clases o reglas definidas para la alineación como align-self-center, justify-content-center

Suscríbete a nuestro canal en Youtube

¿Cómo centrar elementos HTML con Bootstrap?

Para poder centrar elementos (divs, botones, imágenes, tablas, formularios, card, etc) solo debemos conocer las clases determinadas para centrar de Bootstrap 5.0. que podemos obtenerlo desde la web oficial de bootstrap En este tutorial veremos en detalle cada elemento a centrar con esta versión de Bootstrap.

Para centrar un elemento absolutamente vertical u horizontal debemos tener claro el ancho y la altura del contenedor, pues el elemento a centrar debe ser menor al contenedor. En este tips vamos a centrar un elemento div o capa en el centro de la pantalla de la página web tanto horizontalmente como verticalmente, esto lo vamos a realizar con las mismas reglas que nos provee el Frameworks de maquetación responsive Bootstrap, y sin la necesidad de agregar otra hoja de estilos para agregar reglas CSS o sobreescribirlas.

HERRAMIENTA PARA CENTRAR UN DIV CON BOOTSTRAP

Prueba el generador de código html y bootstrap para centrar un div

Generador de código para centrar

Indice

Centrar un div o varios
Centrar un texto
Centrar un botón
Centrar una tabla
Centrar una imagen
Centrar el menú de navegación
Centrar un botón encima de una imagen
Centrar un formulario

¿Cómo centrar un div o varios divs?

Centrar una capa horizontalmente

En ocasiones solo necesitamos centrar un div horizontalmente en una página web, solo necesitamos declarar row y la clase justify-content-center. El div a centrar debe tener un ancho y para ello usamos col-auto y listo con ello obtendremos un div centrado horizontal.

Quedaría asi

Centrar horizontalmente

Centrar un div en forma horizontal y vertical

Centrado absoluto es decir vertical y horizontalmente para ello agregamos una altura puede ser con vh-100 o estilos personalizados para variar la altura, y la clase align-items-center y listo tendremos un div centrado al medio, completamente centrado en su eje vertical y horizontal. Obviamente este div centrado puede servirnos para alojar más elementos contenedor o display.

Y el resultado quedaria así

Centrar div ejemplo absoluto

Otro ejemplo más simple o más elegante (para copy y paste):

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centrar DIV con Bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body class="d-flex align-items-center justify-content-center" style="min-height: 100vh;" >
    <div class="text-center bg-danger rounded-3 p-5 shadow-lg text-white">
        <h1>Contenido Centrado</h1>
        <p>Este es un ejemplo de cómo centrar un div con Bootstrap 5.</p>
      </div>
</body>
</html>

Centrar o distribuir divs horizontalmente

Básicamente estamos centrando dos div con un distribución espaciada entre el contenedor, cada uno de ello y el espacio entre ellos, si deseamos centrar tres o más divs simplemente incrementamos el número de div con la clase col-x-x ... siempre y cuando no sobrepase las 12 partes del sistema de grillas de Bootstrap, caso contrario solo usar la clase col digamos para más de 12 celdas o partes.

Distribuir horizontalmente divs

Centrar div verticalmente y distribuirlos horizontalmente

Aqui podemos intercambiar las clases justify-content-around, justify-content-between o simplemente justify-content-center

Centrar verticalmente y distribuir horizontalmente div

¿Cómo centrar un texto usando Bootstrap?

Si de texto se trata generalmente basta con llamar a la clase text-center

Centrar un h1

Centrar un parrafo

Centrar un span

Centrar un span con bootstrap

¿Cómo centrar un botón absolutamente vertical y horizontalmente?

Para centrar un botón absolutamente con Bootstrap es decir al medio de su contenedor , debemos darle un altura de definida en este caso le damos la clase vh-100 si se quiere modificar dicha altura a una menor debemos crear una clase personalizada e indicar la altura en px u otra unidad de medida, finalmente con col-auto indicamos que tome el ancho del contenido a centrar.

Centrar botón con Bootstrap 5

¿Cómo centrar una tabla con Bootstrap 5 ?

Para centrar una tabla debemos tener en cuenta

Un div con la clase container
Un div hijo con la clase row y justify-content-center para centrar el contenido
y Finalmente declaramos un div con la clase col-auto para contener la tabla con el ancho de la misma y centrar horizontalmente

Centrar una tabla con Bootstrap 5

¿Centrar un imagen con Bootstrap V5?

Centrar una imagen es relativamente sencillo solo debemos tener en cuenta;

Un contenedor div con la clase container
Y la imagen con la clase mx-auto d-block

Centrar imagen con Bootstrap 5

¿Cómo centrar un botón sobre una imagen ?

En ocasiones necesitamos centrar un botón de acción sobre una imagen, en este ejemplo podemos ver que el botón esta centrado en una imagen completamente al medio. Para lograrlo debemos usar la clase card. Veamos:

Declaramos un div con la clase card
Indicamos la imagen y la case img-fluid para que se ajuste al width de la pantalla.
Declaramos un div con la clase card-img-overlay, este se colocará encima de la imagen
Dentro declaramos las clases row, align-items-center h-100 y justify-content-center
Finalmente podemos declarar el botón o integrar un div con la clase col-auto

¿Cómo centrar un formulario con Bootstrap 5?

Para el ejemplo crearemos un formulario simple de login con su cajas de texto para email y password además del botón de envio submit.

Esta demás decir que un formulario generalmente debe estar centrado. Para obtenerlo sigamos los siguientes pasos:

Un div con la clase container
Un div hijo con la clase row, vh-100, justify-content-center y align-items-center
Dentro un div con la clase col-auto o simplemente con una medida relativa col-sm-4
Declaramos finalmente el formulario con sus respectivos elementos input y estilos.

Centrar formulario con Bootstrap 5

CENTRAR UN DIV SOLO CON CSS

¿Se puede centrar un div solo con CSS?. Pues claro que si y probablemente sea mucho más sencillo y se use menos recursos con esto me refiero a codear menos código CSS, una de las ventajas en el desarrollo de una página web orientada al SEO nos puede ser de mucha ayuda usar menos código unos cuantos bytes o decenas de kb y no cargar los más 190 kb que pesa Bootstrap y que probablemente no se usen todos, esto claro se traduce en velocidad de descarga de la página web, si quieres ver cómo se puede programar el centrado con solo css haz click en el siguiente link div centrado solo con css.

CONCLUSIÓN DEL TIP BOOTSTRAP

Entonces vemos que es relativamente sencillo centrar un elemento HTML con CSS en este caso un DIV con Bootstrap, sin agregar CSS adicionales. Objetivamente esto ayuda bastante a tener menos código, por tanto en una estrategía SEO es genial para obtener mayor velocidad de carga de nuestro proyecto Web, aunque poquito pero ayuda bastante.

Listo, hasta un próximo tip de diseño web.

Leido 269874 veces

Demo

Descarga el código fuente Bootstrap

Recurso descargado 4845 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos

Diseño Web Responsive con Bootstrap

Curso de Diseño Web con Bootstrap para una tienda de vestidos

Descarga del código fuente

USD 0.00

Centrar un Div con Bootstrap