LabEx
EntrerRejoindre

Centrer des éléments verticalement et horizontalement

Beginner

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

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser les transformations CSS pour centrer des éléments enfants verticalement et horizontalement à l'intérieur de leur élément parent. Nous y arriverons en utilisant le positionnement relatif et absolu, ainsi que la propriété transform et sa fonction translate. Ce laboratoire vous fournira une technique utile pour positionner le contenu sur vos pages web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Transform Centering

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour centrer verticalement et horizontalement un élément enfant à l'intérieur de son parent à l'aide de transformations CSS, suivez ces étapes :

  1. Définissez la propriété position de l'élément parent sur relative et celle de l'élément enfant sur absolute pour le positionner par rapport à son parent.
  2. Utilisez left: 50% et top: 50% pour déplacer l'élément enfant de 50% du bord gauche et supérieur de l'élément parent.
  3. Utilisez transform: translate(-50%, -50%) pour annuler sa position, de sorte qu'il soit centré verticalement et horizontalement.
  4. Notez que la hauteur et la largeur fixes de l'élément parent sont uniquement à des fins de démonstration.

Voici un exemple de code HTML :

<div class="parent">
  <div class="child">Contenu centré</div>
</div>

Et voici le code CSS correspondant :

.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;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations ! Vous avez terminé le laboratoire Transform Centering. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.