Comment centrer les éléments HTML grâce au positionnement absolu et au positionnement fixe du CSS ?

Beaucoup de gens essaient de centrer des éléments comme les boîtes modales au centre de la page via CSS, mais échouent, puis ils le font avec JS. Dans cet article technique, je vais vous montrer comment centrer un élément sans utiliser JavaScript. Sans plus tarder, entrons directement dans le texte.

La méthode est relativement simple, c'est-à-dire qu'au lieu d'utiliser un seul élément d'emballage, utilisez deux éléments. (Cours recommandé : Tutoriel vidéo CSS)

HTML :

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

CSS :

.popup{
   position:fixed;
 left:50%;  
}

Ce CSS centrera le côté gauche de l'élément au centre de la fenêtre, mais nous voulons que la boîte modale soit centrée en fonction de la position médiane de l'élément.

Regardons maintenant l'astuce, puisque nous avons deux wrappers pour le popup, nous pouvons manipuler le div interne et dire au div de se déplacer vers la gauche de -50 % par rapport et parce qu'il est à l'intérieur du conteneur, le div ne fera que déplacez la moitié de sa taille vers la gauche. C'est ainsi que nous rassemblons le modal.

Ajouter du CSS

.popup .wrapper{
  position:relative; 
  left:-50%;
}

Ensuite notre élément est placé au centre horizontal, réalisant ainsi le centrage de l'élément.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!