Comment centrer un élément Div sur l'écran en utilisant uniquement CSS ?-tutoriel CSS-php.cn

How to Center a Div Element on the Screen Using Only CSS?

Centrer un
Élément à l'écran à l'aide de CSS

Question :

Comment puis-je centrer un élément

élément à l'écran, quelle que soit la taille de l'écran, en utilisant uniquement CSS ?

Solution :

Pour centrer un élément

(ou ) au centre de l'écran, suivez ces étapes :

Définissez la position de l'élément sur "absolue".
Définissez le haut et la gauche propriétés à "50 %."
Utilisez des marges négatives pour décaler la position de l'élément afin qu'il apparaisse centré :
```
<br> margin-top : -{height_of_element}/2;<br> margin-left : -{width_of_element}/2;<br>
```

Exemple avec Fixe Taille :

#myDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

Copier après la connexion

Remarque :

Si vous ne souhaitez pas que l'élément défile avec le site Web, pensez à utiliser « fixe » positionnement au lieu de "absolu".
Pour un élément dynamique qui ajuste sa taille, utilisez JavaScript ou CSS calc() pour calculer le bon marges.

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!

source：php.cn

Article précédent：Pourquoi mon image CSS `content: url()` ne s'affiche-t-elle pas dans Firefox ? Article suivant：Comment puis-je styliser de manière fiable le dernier élément de la liste dans tous les navigateurs ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur