Cómo colocar un bloque en el centro de la pantalla en CSS

👋 Hoy hablaremos de cómo colocar un elemento en el centro de la pantalla usando CSS. Si acabas de empezar tu viaje en la programación, no te preocupes: ¡todo se explicará de forma muy sencilla y accesible!

Cuando creas una página web, a veces necesitas colocar un elemento, como un bloque de texto o una imagen, justo en el centro de la pantalla. Esto hace que el diseño sea más agradable y fácil de usar. ¡Veamos cómo hacerlo! 🌉

¿Por qué es necesario colocar el bloque en el centro?

Centrar un bloque es una técnica muy común en el diseño web. Centrar los elementos hace que la página esté más equilibrada y llama la atención sobre la información importante. Por ejemplo, un sitio puede tener un formulario de inicio de sesión y quieres que llame la atención de inmediato. En este caso, es conveniente colocarlo justo en el centro.

Centrar los bloques también ayuda a que la página sea fácil de usar, ya que los elementos clave no se esconden en las esquinas.

💡 Principales formas de centrar el bloque

Hay varias formas de colocar un bloque en el centro de la pantalla usando CSS. Echaremos un vistazo a los más populares, que serán adecuados incluso para aquellos que acaban de empezar a aprender desarrollo web.

1. Centrado con Flexbox

Flexbox es una de las formas más fáciles de centrar elementos, e incluso es adecuado para principiantes. Veamos cómo hacerlo:

<div class="wrapper">
  <div class="box">Я по центру! 👌</div>
</div>

Y así es como se verá el CSS para esta tarea:

.wrapper {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center;   /* Центрирование по вертикали */
  height: 100vh;         /* Высота экрана */
}

.box {
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 10px;
}

¿Qué está pasando aquí? 🤔

• display: flex; hace que el elemento sea un contenedor de Flexbox.

• justify-content: center; coloca el bloque horizontalmente.

• align-items: center; coloca el bloque verticalmente.

• height: 100vh; indica que la altura del contenedor es igual a la altura de toda la pantalla.

¡Así, el bloque queda justo en el centro!

2. Uso del posicionamiento

Otra forma sencilla es utilizar el posicionamiento absoluto y las propiedades de sangría. Aquí hay un ejemplo:

<div class="box">Центр! 🚀</div>

Y CSS:

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #add8e6;
  padding: 20px;
  border-radius: 10px;
}

• position: absolute; le dice al navegador que el bloque debe posicionarse en relación con el contenedor más cercano con posicionamiento relativo.

• top: 50%; left: 50%; mueven el bloque hacia el centro.

• transform: translate(-50%, -50%); corrige la posición del bloque para que el centro del elemento coincida con el centro de la pantalla.

Este método es bueno porque es fácil de entender y aplicar, especialmente para tareas simples.

¿Cómo trabajar con estos métodos?

Para trabajar eficazmente con el centrado, es necesario comprender un poco las propiedades básicas de CSS, como Flexbox, posicionamientoy márgenes. Con la experiencia, aprenderás a elegir el método más adecuado en función de la tarea.

Flexbox es conveniente para el diseño moderno, ya que ajusta automáticamente los elementos y el posicionamiento con transform permite colocar el elemento con precisión en cualquier parte de la pantalla.

Ejemplo práctico 🚀

Veamos otro ejemplo que puedes probar por ti mismo:

<div class="center-wrapper">
  <h1>Добро пожаловать на мой сайт!</h1>
  <p>Этот текст находится точно по центру экрана. Попробуйте сами! 💪</p>
</div>

.center-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #ffebcd;
  text-align: center;
}

Aquí hemos añadido flex-direction: column; para colocar el texto verticalmente, así como text-align: center; para alinear el texto.

🛍️ Conclusión

¡Ahora ya sabes cómo colocar un bloque en el centro de la pantalla de varias maneras! Esta es la base del desarrollo web, y estas habilidades definitivamente te serán útiles. Intenta ponerlas en práctica: así aprenderás el material más rápido y comprenderás qué método es el más adecuado para las diferentes tareas.

Si estás interesado en profundizar en el tema del desarrollo web y aprender nuevas técnicas, ¡escríbenos! Podemos crear un minicurso que hará que tu aprendizaje sea fácil y divertido. 🎓