Centrar un div con CSS
Para centrar o alinear un div en el centro de una página web con CSS existen muchas formas de centrar verticalmente, horizontal y centrado absoluto ejemplo
Cuando empezamos a aprender maquetación HTML y CSS, al inicio nos abruma la cantidad de etiquetas, atributos, y propiedades que tenemos a nuestra disposición para crear contenido web. pero en realidad es sencillo muy sencillo. En esta ocasión vamos a ver como centrar un div en un contenedor que puede ser otro div.
Podemos centrarlo usando las reglas CSS de posicionamiento ( relative, absolute), flexbox ( flex ), margenes ( margin ), ubicación ( top, left, etc..) , en el desarrollo del tutorial veremos las diferentes formas que podemos usar, no son las únicas, pero se que te servirá como a mi también.
Entonces sin más empecemos a maquetas o diseñar html con css para centrar un div con muchos ejemplos prácticos para que puedas emplearlos en tus proyectos web para tu portafolio profesional de frontend
Contenido
- Que es centrar un div con CSS
- Formar de centrar un DIV
- Forma 1: DIV centrado horizontal arriba
- Forma 2: DIV centrado horizontal abajo
- Forma 3: DIV centrado vertical a la derecha
- Forma 4: DIV centrado horizontal a la izquierda
- Forma 5: DIV centrado horizontal y vertical simultáneamente
- Alineación centrada de un DIV con Bootstrap
¿Qué significa centrar un div?
Centrar un div o capa significa posicionarlo en el centro de un contenedor, puede ser en su eje X horizontalmente, en su eje Y verticalmente o completamente centrando en sus ejes X e Y. El contenedor puede ser el mismo body u otro capa div o similar como header, section, article, footer. Pues un ejemplo práctico de aplicación es posicionar un botón completamente centrado sobre una imagen o carrusel de imágenes.
¿Qué maneras o formas de diseñar un div centrado hay?
Veamos una lista de opciones clickables que te pueden ayudar a resolver tu duda sobre el centrado.
- Forma 1:Centrar un div horizontalmente en la parte superior del contenedor
- Forma 2: Centrar un div horizontalmente en la parte inferior del contenedor
- Forma 3: Centrar un div verticalemtne en la parte izquierda del contenedor
- Forma 4: Centrar un div verticalemente en la parte derecho del contenedor
- Forma 5: Y centrar un div absolutamente en el centro del contenedor.
Forma 1: ¿Cómo centrar horizontalmente un div en la parte de arriba del div?
Para centrar un div con su eje x en un contenedor posicionandolo en la parte superior top podemos hacerlo de las siguiente manera:
* Versión usando margin
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>Veamos el div centrado horizontalmente</span></div>
</div>
<style>
/*Reseteamos el margen de html y body*/
html,body{ margin: 0;}
/* declaramos un color y una altura full*/
.div_contenedor{
background: crimson;
height: 100vh;
}
/* declaramos un color, un ancho y una altura*/
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
</body>
* Otra versión usando flexbox
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>Veamos el div centrado horizontalmente</span></div>
</div>
<style>
html,body{ margin: 0;}
.div_contenedor{
background: crimson;
height: 100vh;
display: flex;
justify-content: center;
}
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
}
</style>
</body>
Forma 2: ¿Cómo centrar horizontalmente en la parte inferior de un div css?
* Versión usando position: absolute
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>Veamos el div centrado horizontalmente</span></div>
</div>
<style>
/*Reseteamos el margen de html y body*/
html,body{ margin: 0;}
/* declaramos un color y una altura full*/
.div_contenedor{
background: crimson;
height: 100vh;
}
/* declaramos un color, un ancho y una altura*/
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
right: 50%;
margin-right: -100px;
}
</style>
</body>
* Otra versión usando flexbox
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>DIV CENTRADO HORIZONTALMENTE ABAJO</span></div>
</div>
<style>
html,body{ margin: 0;}
.div_contenedor{
background: crimson;
height: 100vh;
display: flex;
justify-content: center;
align-items: flex-end;
}
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
}
</style>
</body>
Forma 3: ¿Cómo centrar un div verticalmente a la derecha o right?
Veamos una forma de sencilla de obtener el centrado vertical de un div en la parte derecha
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>DIV CENTRADO VERTICALMENTE EN LA DERECHA</span></div>
</div>
<style>
html,body{ margin: 0;}
.div_contenedor{
background: crimson;
height: 100vh;
}
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
position: absolute;
top:50%;
right: 0px;
margin-top: -100px;
}
</style>
</body>
Forma 4: ¿Cómo centrar un div verticalmente a la izquierda o left?
Código html y css para centrar el div en la parte izquierda y verticalmente
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>DIV CENTRADO VERTICALMENTE A LA IZQUIERDA</span></div>
</div>
<style>
html,body{ margin: 0;}
.div_contenedor{
background: crimson;
height: 100vh;
}
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
position: absolute;
top:50%;
margin-top: -100px;
}
</style>
</body>
Forma 5: ¿Cómo centrar vertical y horizontalmente una capa div?
Normalmente en el diseño de una página web creamos un div como contenedor de toda la parte visual del documento HTML y por una cuestión de diseño necesitamos centrar el div horizontalmente. Pues podemos hacerlo usando CSS
* Versión con margin, top y left
<body>
<div class="div_contenedor">
<div class="div_centrado"><span>DIV CENTRADO ABSOLUTO</span></div>
</div>
<style>
html,body{ margin: 0;}
.div_contenedor{
background: crimson;
height: 100vh;
}
.div_centrado{
background: yellow;
width: 200px;
height: 200px;
position: absolute;
top:50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
</body>
* Versión con seudoelemento ::before
Veamos que también podemos centrar una caja usando el seudoelemento before y la regla vertical-align: middle además de algunas reglas adicionales veamos el código css y html de esta versión.
<body>
<div class="div_contenedor">
<div class="div_centrado">
</div>
</div>
<style>
.div_contenedor{
height: 100%;
width: 100%;
text-align: center;
background-color: rebeccapurple;
}
.div_contenedor::before{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.div_centrado{
width: 200px;
height: 200px;
background: red;
display: inline-block;
vertical-align: middle;
}
</style>
</body>
* Versiones con flexbox
Si escribimos el código css, obtendremos lo siguiente:
- display: flex; Trata de ocupar todo el alto de su contenedor
- background: peru; aplica un color al fondo
- place-items: center; | align-items: center
- justify-content: center;
- height: 100vh;
* (1) Código HTML y CSS para centrar un div usando flexbox : place-items
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CODEA | CENTRAR DIV CON CSS</title>
<style>
body {
display: flex;
background: peru;
place-items: center;
justify-content: center;
height: 100vh;
}
.arequipa{
background: white;
border-radius: 10px;
box-shadow: saddlebrown 0px 0px 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="arequipa">
<h1>Div centrado</h1>
</div>
</body>
</html>
Cómo se observa hemos declarado una clase llamada centrado para poder usarla y aplicarla en diferentes elementos o tags html, con ello logramos reducir las líneas de código y optimizar el procesamiento y carga de la página web, es decir estamos reutilizando código.
* Otra versión (2) usando flexbox: align-items
<!DOCTYPE html>
<html lang="es">
<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>CENTRAR DIV HORIZONTAL Y VERTICAL</title>
</head>
<body>
<div class="div_contenedor">
<div class="div_centrado"><p>DIV CENTRADO <br> horizontal y vertical</p></div>
</div>
<style>
html,body{ margin: 0;}
.div_contenedor{
background: rgb(99, 64, 255);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.div_centrado{
background: linear-gradient(white, rgb(189, 189, 189));
width: 200px;
height: 200px;
border-radius: 5px;
text-align: center;
}
</style>
</body>
</html>
Existen otras alternativas para obtener este efecto, que igualmente pueden ser opciones válidas en función de las circunstancias. Hemos elegido esta porque nos han parecido las más sencillas de implementar en cuanto a código, equilibradas con la compatibilidad que ofrecen los navegadores web.
Y ¿Cómo se puede centrar con Bootstrap?
Centrar con Bootstrap un elemento es mucho más rápido claro esta si conoces las clases adecuadas que trae la librería de Bootstrap, en el siguiente link puedes ver como hacerlo: centrar con Bootstrap.
Leido 85638 veces
Descarga el código fuente CSS
Centrar un div con CSS
Debe registrarse para descargar
Descargar Código Fuente
