LabEx
EntrarÚnete

Centrar elementos vertical y horizontalmente

Beginner

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

Introducción

En este laboratorio, aprenderemos a usar las transformaciones CSS para centrar elementos hijos tanto vertical como horizontalmente dentro de su elemento padre. Lo haremos utilizando la posición relativa y absoluta, junto con la propiedad transform y su función translate. Este laboratorio te proporcionará una técnica útil para posicionar contenido en tus páginas web.

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 100%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Centrado con Transformaciones

index.html y style.css ya se han proporcionado en la máquina virtual.

Para centrar vertical y horizontalmente un elemento hijo dentro de su padre utilizando transformaciones CSS, siga estos pasos:

  1. Establezca la propiedad position del elemento padre en relative y la del elemento hijo en absolute para posicionarlo con respecto a su padre.
  2. Utilice left: 50% y top: 50% para desplazar el elemento hijo un 50% desde el borde izquierdo y superior del elemento padre.
  3. Utilice transform: translate(-50%, -50%) para negar su posición, de modo que quede centrado tanto vertical como horizontalmente.
  4. Tenga en cuenta que la height y width fijas del elemento padre son solo para fines de demostración.

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

<div class="parent">
  <div class="child">Contenido centrado</div>
</div>

Y aquí está el código CSS correspondiente:

.parent {
  border: 1px solid #9c27b0;
  height: 250px;
  position: relative;
  width: 250px;
}

.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

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 Transformaciones. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.