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

How Can I Perfectly Center a Div Element on the Screen Using Only CSS?

Positionnement

Élément parfaitement au Screen Center avec Pure CSS

Dans cet article, nous aborderons le défi courant du centrage d'un élément

(ou ), quelle que soit la taille de l'écran. L’objectif est de répartir uniformément l’espace restant de tous les côtés. Voici comment :

Utiliser le positionnement absolu

Si l'élément a une largeur et une hauteur fixes, le positionnement absolu est l'approche la plus simple :

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

Copier après la connexion

Dans ce cas :

position : absolue retire l'élément du document normal flow.
top : 50 % définit la position supérieure de l'élément au centre de la fenêtre.
left : 50 % définit la position gauche de l'élément au centre de la fenêtre.
margin-top : -50px et margin-left : -50px sont utilisés pour ajuster sa position dans le viewport.

Remarque : Évitez toujours les styles en ligne car ils peuvent créer des problèmes de maintenance et entraver la réutilisabilité du code.

Voici un exemple fonctionnel sur JSFiddle : http:/ /jsfiddle.net/S5bKq/.

En suivant ces étapes, vous pouvez centrer efficacement n'importe quel

élément sur une page Web, quelle que soit la taille de l'écran, garantissant une mise en page visuellement attrayante.

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：Grille CSS vs Flexbox : quel est le meilleur pour créer des carrés réactifs ? Article suivant：Pourquoi les éléments HTML apparaissent-ils retardés sur iPad Safari pendant le défilement et comment cela peut-il être corrigé ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2580

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2719

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2305

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...