Comment puis-je centrer parfaitement un élément dans une fenêtre de navigateur, quelle que soit sa taille ?

Centrage parfait des éléments dans les fenêtres du navigateur

Pour un centrage précis et stable des éléments dans une fenêtre de navigateur, quelles que soient les dimensions de la fenêtre et les configurations de la barre d'outils , ou résolutions d'écran, la solution suivante propose une approche efficace.

Pour réaliser ce centrage, l'élément en question, par exemple un

, doit se voir attribuer les propriétés CSS suivantes :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

1. Position : absolue : Cette propriété supprime l'élément du flux de documents normal, lui permettant d'être positionné librement dans la fenêtre du navigateur.
2. Haut : 50 % ; Left : 50%;: Ces propriétés définissent les positions supérieure et gauche de l'élément à 50 % de la hauteur et de la largeur de la fenêtre, respectivement. Par défaut, cela place l'élément au centre de la fenêtre verticalement et horizontalement.
3. Transform: translation(-50%,-50%);: La propriété transform ajuste la position de l'élément en le traduisant davantage de la moitié de sa hauteur et de sa largeur. Cette correction garantit que le point central de l'élément s'aligne parfaitement avec le centre de la fenêtre.

Avec ces propriétés CSS en place, l'élément ciblé restera systématiquement centré dans la fenêtre du navigateur, quelle que soit la taille ou la taille de la fenêtre. d'autres facteurs.

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!

css for Property default this position transform Translate Other

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