LabEx
EntrarÚnete

Técnicas de centrado con Flexbox responsivo

Beginner

This tutorial is from open-source community. Access the source code

Introducción

En este laboratorio, exploraremos el concepto de centrado con flexbox en CSS. Aprenderás cómo centrar elementos hijos horizontal y verticalmente dentro de un elemento padre utilizando flexbox. Al final de este laboratorio, serás capaz de crear diseños responsivos y visualmente atractivos utilizando técnicas de centrado con flexbox.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 94%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Centrado con Flexbox

index.html y style.css ya se han proporcionado en la VM.

Para centrar un elemento hijo tanto horizontal como verticalmente dentro de un elemento padre utilizando flexbox, siga estos pasos:

  1. Cree un diseño con flexbox estableciendo la propiedad display del elemento padre en flex.
  2. Utilice la propiedad justify-content para centrar el hijo horizontalmente estableciendo su valor en center.
  3. Utilice la propiedad align-items para centrar el hijo verticalmente estableciendo su valor en center.
  4. Agregue el elemento hijo dentro del elemento padre.

A continuación, se muestra un fragmento de código de ejemplo:

<div class="flexbox-centering">
  <div>Contenido centrado.</div>
</div>

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Centrado con Flexbox. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.