recherche

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

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

Linda Hamilton
Linda Hamiltonoriginal
2024-12-01 11:15:12447parcourir

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

Centrer un

Élément à l'écran avec CSS

Lors de la création de mises en page Web, il est souvent nécessaire de positionner les éléments au centre de l'écran. Ceci peut être réalisé à l'aide de CSS, éliminant ainsi le besoin de styles en ligne ou de solutions JavaScript complexes.

Fixation de la largeur et de la hauteur de l'élément

Une approche simple consiste à définir une valeur fixe. largeur et hauteur pour le

element:

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

JavaScript css define for using this position
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：Comment créer des ombres de boîte horizontales sans images ni astuces ?Article suivant：Comment créer des ombres de boîte horizontales sans images ni astuces ?

Articles Liés

Voir plus