recherche

Maison >interface Web >tutoriel CSS >Comment centrer un élément Div sur l'écran en utilisant uniquement CSS ?

Comment centrer un élément Div sur l'écran en utilisant uniquement CSS ?

DDD
DDDoriginal
2024-11-29 07:17:14716parcourir

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 :

  1. Définissez la position de l'élément sur "absolue".
  2. Définissez le haut et la gauche propriétés à "50 %."
  3. 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;
}

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!

JavaScript css if for using position margin table
Déclaration：
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
Article précédent：Pourquoi mon image CSS `content: url()` ne s'affiche-t-elle pas dans Firefox ?Article suivant：Pourquoi mon image CSS `content: url()` ne s'affiche-t-elle pas dans Firefox ?

Articles Liés

Voir plus