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

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

Susan Sarandon

Libérer： 2024-11-30 07:36:16

original

375 Les gens l'ont consulté

How Can I Perfectly Center an Element in a Browser Window Regardless of Size?

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%);

Copier après la connexion

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.
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.
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!