En el desarrollo web, ordenar y estilizar elementos con la ayuda de CSS es una de las tareas más comunes que realizaras como desarrollador frontend, centrar los elementos podría parecer una tarea compleja y si aún no sabes cómo hacerlo hoy aprenderás 3 formas de centrar un div con CSS; en los siguientes ejemplos tendremos un contenedor padre y un elemento hijo el cual es el que centraremos con respecto al contenedor padre.
Hoy hablaremos sobre la como centrar un div con CSS, puedes leer este post ó ver y escuchar esta información en formato de video en nuestro canal de youtube, te dejamos el link por si prefieres este formato. 😃 👍
Preparación
Comenzaremos con los archivos y código necesario para comenzar a centrar nuestros elementos; primero, te dejo el código HTML que usaremos:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="./index.css" type="text/css">
</head>
<body>
<main class="container">
<figure class="child-element">
<img src="./holaMundo.jpg" alt="logo hola mundo">
</figure>
</main>
</body>
</html>
Ahora también tendremos que tener un archivo CSS, te dejare el código base aquí:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background-color: #000;
padding: 25px;
}
.container {
width: 800px;
height: 800px;
background-color: #000;
border: 5px solid #fff;
border-radius: 25px;
margin: 0 auto;
}
.child-element {
width: 300px;
height: 300px;
background-color: #fff;
border-radius: 25px;
}
img {
width: 100%;
height: 100%;
border-radius: 25px;
}
Y por último, necesitaremos una imagen, puedes colocar la imagen que mas te guste en este caso utilizaremos el logo de Hola Mundo; y al final deberas tener una estrcutura de archivos similar al siguiente:
Ejecutando este código vamos a tener el siguiente resultado:
Si ya tienemos esto, comenzaremos con la primera forma para centrar un div:
Margin:
Una de las maneras más sencillas para centrar un elemento es usando la propiedad margin: 0 auto; con esto le decimos a este elemento que su margen sea de 0 en el eje y, es decir los márgenes top y bottom tendrán 0 pixeles, mientras que en el eje x, los márgenes right y left se les aplicara el valor de margen al espacio que tengan disponible dentro del contenedor padre, centrando así a este elemento hijo.
Por lo tanto, tenemos que agregar esta propiedad a nuestro elemento hijo:
.child-element {
margin: 0 auto;
}
¡Con esto quedara listo!, aqui un vistazo con el resultado:
Debes de tener en cuenta que eso aplicara para los elementos que puedan usar esta propiedad, para un elemento con display: inline esto no funcionara, a menos que le coloques adicionalmente la propiedad
display:inline-block.
Position:
En este caso haremos uso del contenedor padre, a este le deberemos colocar la propiedad position con valor relative, mientras que al elemento hijo le colocaremos la propiedad position con valor absolute.
Y el siguiente paso será colocarle a las propiedades top:50%, right: 50% y transform:translate(-50%, -50%), y con esto quedará centrado en toda la pantalla.
.container {
position: relative;
}
.child-element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Aquí, cómo nos quedaría el resultado:
Con display Flex y Grid:
justify-content y align-items
Si nuestro contenedor padre tiene la propiedad display grid o flex, podremos hacer uso de la propiedad justify-content, con la que podremos alinear los elementos en el eje x (esto en flex cuando se trate de flex-row) y con align-items podremos alinear los elementos en el eje y, en ambos casos su valor deberá ser center para que el elemento hijo se centre en ambos ejes.
.container {
display: flex;
justify-content: center;
align-items: center;
}
Este sería el resultado:
place-content
Si el display es Grid y queremos que se apliquen ambas propiedades con una sola línea, podemos hacer con la propiedad place-items y con el valor center. Este sería el resultado:
.container {
display: grid;
place-items: center;
}
Aquí, como se ve:
Alineación desde el hijo con self
Al igual el elemento hijo se le pueden definir las propiedades para centrarse en referencia al padre, en este caso sería con las propiedades justify-self y align-self con el valor center, o con place-self con valor center para lograr el mismo resultado.
.container {
display: grid;
}
.child-element {
justify-self: center;
align-self: center;
}
Aquí ambos ejemplos:
Y esto ha sido todo, hemos visto diferentes formas de centrar un div, va a depender de tu proyecto por cuál solución vas a utilizar para centrar elementos en tu página web.
Y ahora, si quieres aprender más sobre CSS, te recomendamos el curso CSS3: sin fronteras de la Academia de Hola Mundo, también te invitamos a ver todos los cursos con los cuales podrás formarte como un excelente desarrollador has click aqui donde podrás ver todos los cursos.
No olvides golpear al botón de «me gusta» de este post, suscribirte a este blog y seguirnos en todas las redes como youtube, twitter e Instagram, y por último, te invitamos a escuchar nuestra música «Hola Beats» diseñada para ayudarte a concentrarte y acompañarte en tu aprendizaje o trabajo, estamos en Spotify y en Apple Music.
¡Hasta la próxima!, y chao mundo
Comments (1)
Ruta para ser desarrollador frontend con Hola Mundo – Hola Mundosays:
abril 19, 2023 at 4:06 pm[…] Además de que te dejaremos un post adicional para cuando te hayas adentrado un poco más a este lenguaje: Como centrar un div con CSS. […]