Como centrar un div con CSS

En este mini-tutorial te enseñaremos como centrar un div de forma facil y comoda, para esto utilizaremos css y un poco de logica que aprenderas si sigues leyendo este articulo asi que ya sabes.. si estas teniendo problemas con los divs y su falta de cooperacion para centrarse este articulo esta hecho a tu medida :yum: Cabe destacar que el metodo que aqui veremos es solo uno de varios que existen por ahi en Internet pero al fin de cuentas efectivos todos, solo depende con cual te acomodes mas asi que sin mas que decir.. a centrar divs!!

Antes que nada..

Escenario

Tenemos un div vacio con una imagen de fondo que queremos que se coloque en el centro de la pantalla ( en realidad lo que contenga el div sale sobrando :yum: ) para comenzar nuestro problema y encontrar la solucion nuestro proyecto luce asi ..

como centrar un div 1

y el codigo del proyecto es el mas simple que podamos tener ( hay que mantenerlo simple )

<html>
<head>
<style>
/* CSS */
html{
	background-color:#505050;
}
#midiv{
	display:block;
        position:absolute;
	width:500px;
	height:400px;
	background-image:url('src/como_centrar_un_div_jonathanmelgoza.jpg');
	overflow:hidden;
}
</style>
</head>
<body>
<!-- HTML -->
<div id="midiv">

</div>
</body>
</html>

Ahora vamos a ver como centrar un div con css!!

Como centrar un Div

Para comenzar debemos tener en cuenta varios detalles..

El tamaño del div que queremos centrar, en este caso 500×400 px
Dentro de que contenedor lo queremos centrar, en este caso dentro del contenedor root

Lo primero que tenemos que hacer es mover el div al centro ( aunque no del todo :yum: ) esto lo hacemos con las propiedades top y left de css, quedaria de la siguiente forma..

#midiv{
	display:block;
	position:absolute;
	width:500px;
	height:400px;
	top:50%;
	left:50%;
	background-image:url('src/como_centrar_un_div_jonathanmelgoza.jpg');
	overflow:hidden;
}

y el div quedaria asi..

como centrar un div 2

Como puedes ver tenemos un pequeño problema, el div se comenzo a dibujar en el centro de la pantalla 🙁 ahora solo tenemos que regresarlo un poco de la vertical y un poco horizontalmente. Para ser mas exactos vamos a regresarnos a la izquierda la mitad de lo que mide el div de ancho es decir 250px y regresar a arriba la mitad de lo que mide el div de altura es decir 200px, esto lo hacemos mediante la propiedad de css margin-top y margin-left pero negativas y el codigo ahora quedaria asi..

#midiv{
	display:block;
	position:absolute;
	width:500px;
	height:400px;
	top:50%;
	left:50%;
	margin-top:-200px;
	margin-left:-250px;
	background-image:url('src/como_centrar_un_div_jonathanmelgoza.jpg');
	overflow:hidden;
}

y el div centrado ahora si quedaria asi..

como centrar un div 3 y listo! Asi es vimos como centrar un div con css! :yum: