Comment puis-je centrer verticalement un élément Div à l'aide de CSS ?-tutoriel CSS-php.cn

Comment puis-je centrer verticalement un élément Div à l'aide de CSS ?

DDD

Libérer： 2024-12-18 05:51:09

original

544 Les gens l'ont consulté

How Can I Vertically Center a Div Element Using CSS?

Alignement vertical de

Éléments avec CSS

Dans cette discussion, nous abordons une question courante : comment centrer verticalement

éléments dans leurs conteneurs parents à l'aide de CSS.

Pour résoudre ce problème, vous pouvez utiliser différentes approches. Une méthode moderne et efficace consiste à exploiter flexbox, un module de mise en page CSS qui offre un contrôle précis sur la disposition des éléments. En appliquant la règle CSS suivante à l'élément parent :

#Login {
    display: flex;
    align-items: center;
}

Copier après la connexion

Vous demandez au navigateur de disposer l'enfant

éléments de manière horizontale (contrôlé par display: flex;) et alignez-les verticalement au centre (align-items: center;). Cette approche fonctionne efficacement dans la plupart des navigateurs modernes.

Pour les navigateurs plus anciens qui ne prennent pas en charge Flexbox, tels qu'Internet Explorer 9 et versions antérieures, des solutions alternatives peuvent être nécessaires. Explorez les lectures recommandées fournies pour en savoir plus sur la prise en charge des navigateurs et les techniques CSS avancées pour l'alignement vertical des éléments.

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!

Article précédent：Pourquoi la dernière marge/remplissage s'effondre-t-elle dans les mises en page Flexbox/Grid ? Article suivant：Comment centrer un élément « position:fixed » avec des dimensions dynamiques ?

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