En el presente tutorial aprenderemos cuatro métodos con los que podremos centrar un div en html de una manera efectiva y sencilla, siempre podrás volver a esta publicación o guardar el código que comparto plenamente cada vez que requieras realizar el proceso.
En este blog constantemente genero publicaciones de desarrollo de aplicaciones web en php, en javascript, python, nodejs entre otros, cuando tengas tiempo te invito a pasar por mi segmento de aplicaciones gratuitas de libre distribución así como el segmento de mis aplicaciones de pago estás últimas cuentas con demo en línea donde puedes ver su funcionamiento en tiempo real.
Video Explicativo
Código al que se hace referencia en el vídeo Explicativo
¿Qué es un div en html?
Una etiqueta div, es un contenedor, un agrupador con nada en específico, pero que tienen la posibilidad de unificiar elementos con un solo id o clase, con esto es posible aplicar estilos css o lógica javascript a voluntad.
Por este motivo para los desarrolladores frontend más que todo una consulta básica muy frecuente es el como centrar un div. Si quisieras convertirte en un desarrollador frontend totalmente gratis te recomiendo la siguiente hoja de ruta de Desarrolladores de Mozilla:
https://developer.mozilla.org/es/docs/Learn/Front-end_web_developer
Métodos más populares para centrar un div en html
Existen una gran cantidad de métodos posibles, sin embargo en esta publicación mostraré solo 4 que me parecen los más efectivos y que principalmente utilizan las siguientes propiedades CSS:
- transform
- margin
- flex
- grid
Método con la propiedad transform
La propiedad transform CSS permite rotar, escalar, sesgar y traducir un elemento. Modifica el espacio de coordenadas del modelo de formato visual CSS.
si requieres más información sobre esta propiedad puedes ingresar al siguiente enlace:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Para aplicar los cambios en un documento html, solo basta con que al div con el que lo vas a enlazar estos cambios CSS, lo identifiques con la clase transform, la etiqueta sería la siguiente:
<div class="transform">div</div>El código CSS con el que principalmente utilizamos la propiedad transform es el siguiente:
.transform{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -100%);
}Método con la propiedad margin
La propiedad margin en CSS, es un margen es el espacio alrededor del borde de un elemento, que podría ser un DIV, mientras que el relleno es el espacio entre el borde de un elemento y el contenido del elemento. La propiedad margin controla el espacio fuera de un elemento. Si requieres más información sobre esta propiedad puedes ingresar al siguiente enlace:
https://developer.mozilla.org/es/docs/Web/CSS/margin
Para aplicar los cambios en un documento html, solo basta con que al div con el que lo vas a enlazar estos cambios CSS, lo identifiques con la clase margin, la etiqueta sería la siguiente:
<div class="margin">div</div>El código CSS con el que principalmente utilizamos la propiedad margin es el siguiente:
.margin{
position:absolute;
top:50%;
left:50%;
margin:auto;
}Método con la propiedad flex
Esta propiedad es de gran popularidad en el mundo frontend, basicamente porque es muy robusta, sencilla y útil para lograr ubicar los elementos en un documento HTML donde quieras.
La propiedad flex indica la capacidad de un elemento de moverse por el espacio disponible de manera intuitiva llenando espacio disponible dentro del DIV.
Si requieres más información sobre esta propiedad puedes ingresar al siguiente enlace:
https://www.w3schools.com/css/css3_flexbox.asp
Para aplicar los cambios en un documento html, solo basta con que al div con el que lo vas a enlazar estos cambios CSS, lo identifiques con la clase flex, la etiqueta sería la siguiente:
<div class="flex">div</div>El código CSS con el que principalmente utilizamos la propiedad margin es el siguiente:
.flex {
width:auto;
height: 100vh;
display: flex;
justify-content:center;
align-items:center;
}Método con la propiedad grid
CSS Grid Layout es una propiedad que permite dividir un documento HTML en diferentes secciones, así como definir su relación la relación de sus elementos en referencia a tamaño y posición, grid sin duda es una gran herramienta CSS, muy popular, si deseas saber más información sobre esta propiedas puedes ingresar al siguiente enlace:
https://www.w3schools.com/css/css_grid.asp
Para aplicar los cambios en un documento html, solo basta con que al div con el que lo vas a enlazar estos cambios CSS, lo identifiques con la clase grid, la etiqueta sería la siguiente:
<div class="grid">div</div>El código CSS con el que principalmente utilizamos la propiedad grid es el siguiente:
.grid {
width:auto;
height: 100vh;
display: grid;
justify-content:center;
align-items:center;
}Conclusión
Esto ha sido todo, te invito a revisar mi apartado de tutoriales, me sigas en mi canal de youtube allí constatemente subo video tutoriales relacionados con el desarrollo web.
Si requieres algún desarrollo a medida o necesitas alguna asesoría no dudes en contarme a mi Whatsapp, directamente en el siguiente enlace:
