Centrer un élément HTML avec position

Devenir un lion dans la jungle du numérique

Centrer un élément HTML avec position

 

Afin de centrer un élément HTML avec du CSS et la propriété position:

  1. mettre son élément à centrer en position Absolute
  2. mettre la div parente de référence pour le centrage en position Relative
  3. Appliquer le css top: 50% à l’élément à centrer
  4. Appliquer le css left: 50% à l’élément à centrer

A ce stade :
Le coin en haut à gauche de votre élément à centrer doit être pile au centre de votre élément parent en position absolute.
Pour le centrer précisément on va enlever 50% de sa propre hauteur et 50% de sa propre longueur avec ce code:

transform: translate(-50%, -50%);

Votre élément est à présent centré parfaitement et même en responsive.

 

Exemple:

centrer un élément HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    /*css pour créer une div avec une couleur de fond et une position quelconque*/
    .parent{
      width: 300px;
      height: 200px;
      background-color: pink;
      margin-left: 35px;
    }
    /*css suivant l'exemple donné ci-dessus*/
    .parent{
      position: relative;
    }
    /*css a appliquer sur la div à centrer*/
    .enfant{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }



  </style>
</head>
<body>

  <div class="parent">
    <div class="enfant">
      DIV super bien centrée
    </div>
  </div>


</body>
</html>










 

 

En continuant à utiliser le site, vous acceptez l’utilisation des cookies. Plus d’informations

Les paramètres des cookies sur ce site sont définis sur « accepter les cookies » pour vous offrir la meilleure expérience de navigation possible. Si vous continuez à utiliser ce site sans changer vos paramètres de cookies ou si vous cliquez sur "Accepter" ci-dessous, vous consentez à cela.Plus d'informations ici

Fermer