Points Essentiels à Retenir
- Le centrage des éléments dans les maquettes web a toujours représenté un défi, mais le CSS moderne facilite désormais grandement le positionnement central.
- Flexbox est la méthode la plus répandue pour centrer les éléments, grâce à son modèle de disposition flexible qui permet un alignement aisé.
- La grille CSS et le positionnement CSS sont également des approches efficaces pour centrer les éléments sur une page web, offrant un contrôle précis sur la mise en page et l’alignement.
La quête du centrage parfait d’un élément dans une mise en page web a longtemps été une source de frustration pour les concepteurs. Bien que cette opération n’ait pas toujours été aisée, de nombreuses conceptions exigent un positionnement central. Fort heureusement, le CSS contemporain offre à présent des solutions efficaces pour atteindre cet objectif.
Découvrez comment centrer un élément div à la fois horizontalement et verticalement en utilisant Flexbox, CSS Grid et le positionnement CSS.
Un Modèle HTML Simple pour S’exercer au Centrage
Les exemples qui suivent emploient un document HTML minimal afin d’illustrer les techniques de centrage avec CSS. Utilisez ce balisage et modifiez le CSS pour chaque section afin d’observer le comportement de ces propriétés.
<html>
<head>
<style>
div { width: 100px; height: 100px; }
body { height: calc(100vh - 16px); }
</style>
</head>
<body>
<div></div>
</body>
</html>
Centrer un Élément Div avec Flexbox
Une compréhension de base de Flexbox est nécessaire avant de l’employer pour centrer un élément div. Heureusement, Flexbox repose sur une approche simple, ce qui explique sa grande popularité. Il propose un modèle de disposition flexible qui simplifie l’alignement et la répartition de l’espace entre les éléments d’un conteneur, ce qui en fait un outil idéal pour le centrage.
Pour réaliser le centrage à l’aide de Flexbox, utilisez le CSS suivant :
body {
display: flex;
}
body {
justify-content: center;
align-items: center;
}
div { background-color: red; }
En consultant le rendu dans les DevTools de Google Chrome, vous pouvez constater comment ces deux propriétés agissent sur l’alignement le long de chaque axe :
Centrer un Élément Div avec la Grille CSS
Recourir à la grille CSS pour centrer un élément constitue une autre méthode efficace, offrant un contrôle précis sur l’organisation et l’alignement.
body {
display: grid;
}
body {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
body {
place-items: center;
}
div {
background-color: blue;
}
Dans ce cas précis, une seule propriété contrôle le positionnement central du div sur votre page :
Centrer un Élément Div avec le Positionnement CSS
Pour utiliser la propriété `position` du CSS afin de centrer un div, il est nécessaire de comprendre le fonctionnement des transformations CSS en conjonction avec les transitions. Voici un guide étape par étape avec un exemple concret.
body {
position: relative;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: green;
}
La transformation `translate(-50%, -50%)` déplace le div vers la gauche et vers le haut de la moitié de sa largeur et de sa hauteur.
Cette méthode consiste à centrer d’abord le coin supérieur de l’élément, puis à le déplacer de manière relative de la moitié de sa largeur et de sa hauteur.
Flexbox, la grille CSS et le positionnement CSS constituent des outils puissants pour centrer des éléments sur une page web. Avec Flexbox, vous pouvez obtenir un centrage horizontal et vertical en quelques lignes de code seulement. La grille CSS offre un alignement performant en deux dimensions et le positionnement CSS permet de centrer un élément par rapport à son conteneur parent.
Grâce à ces techniques, vous pouvez garantir la clarté et le professionnalisme de vos pages web.