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

#divElement {
    width: 100px;
    height: 100px;
}

Positionnement de l'élément

Pour positionner l'élément au centre exact, on utilise le positionnement absolu :

#divElement {
    position: absolute;
}

Calcul des coordonnées du centre

Pour déterminer le centre de l'écran, nous devons trouver le milieu de sa largeur et de sa hauteur. Cela implique de les diviser par deux :

top_margin = screen_height / 2;
left_margin = screen_width / 2;

Ajuster les marges de l'élément

Pour ajuster la position de l'élément, nous utilisons des marges négatives. Cela déplace l'élément de moitié en hauteur et en largeur par rapport à sa position d'origine, en le centrant sur l'écran :

#divElement {
    margin-top: -top_margin;
    margin-left: -left_margin;
}

Exemple complet

En rassemblant le tout, voici le code CSS complet :

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

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!