Centrar un div con CSS

¿Cómo centrar un div con CSS vertical y horizontalmente ?

VIDEO ¿Cómo centrar un div con CSS vertical y horizontalmente ?

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.

¿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.

¿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.

  1. Forma 1:Centrar un div horizontalmente en la parte superior del contenedor
  2. Forma 2: Centrar un div horizontalmente en la parte inferior del contenedor
  3. Forma 3: Centrar un div verticalemtne en la parte izquierda del contenedor
  4. Forma 4: Centrar un div verticalemente en la parte derecho del contenedor
  5. 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?

Centrar un div horizontalmente arriba

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?

Centrar un DIV abajo

 

* 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?

Div centrado verticalmente en la derecha

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?

Capa centrado a la izquierda verticalmente

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

Centrado absoluto de un div con 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:

  1. display: flex; Trata de ocupar todo el alto de su contenedor
  2. background: peru; aplica un color al fondo
  3. place-items: center; | align-items: center
  4. justify-content: center;
  5. 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

<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;  
        display: flex;     
        align-items: center;
        justify-content: center;
    }
    .div_centrado{
        background: yellow;
        width: 200px;       
        height: 200px;
    }
</style>
</body>

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.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 11915 veces | Publicado hace 2 años

Curso Flutter y Laravel Tienda Abarrotes con Delivery

Mira el temario del curso en el siguiente link
VER MÁS DETALLES DEL CURSO

Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020