Como centrar un div con CSS – Mini-Tutorial – ♦

Como centrar un div con CSS – Mini-Tutorial – ♦

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

 

 


Suscríbete!

Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

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

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

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

y el div centrado ahora si quedaria asi..

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

 

como centrar un div con css

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *