9.1 Centrage horizontal
Centrer les éléments sur une page web est l'une des tâches principales du web design. Ça permet de créer des mises en page esthétiques et faciles à lire. On va voir ci-dessous différentes méthodes pour le centrage horizontal et vertical des éléments, en utilisant les techniques modernes du CSS.
1. Centrage des éléments block avec margin: auto
Une des manières les plus simples de centrer des éléments block est d'utiliser margin: auto.
Exemple :
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
margin: 0 auto;
}
<div class="centered-box"></div>
Explication du code :
margin: 0 auto;: applique des marges automatiques à gauche et à droite, centrant ainsi l'élément horizontalement
2. Centrage des éléments inline avec text-align
Pour centrer des éléments inline ou intégrés à l'intérieur d'un élément block, on peut utiliser la propriété text-align: center.
Exemple :
.container {
text-align: center;
background-color: #f1c40f;
padding: 20px;
}
.inline-element {
background-color: #e74c3c;
display: inline-block;
padding: 10px;
color: white;
}
<div class="container">
<div class="inline-element">Élément inline</div>
</div>
Explication du code :
text-align: center;: centre les éléments inline à l'intérieur d'un conteneur block
3. Centrage des éléments avec Flexbox
Flexbox offre une manière flexible et simple de centrer les éléments, à la fois horizontalement et verticalement.
Exemple :
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Explication du code :
display: flex;: définit le conteneur comme Flexboxjustify-content: center;: centre les éléments horizontalementalign-items: center;: centre les éléments verticalement (sera détaillé plus tard)
9.2 Centrage vertical
1. Centrage avec Flexbox
Flexbox offre une manière simple de centrer les éléments verticalement.
Exemple :
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2ecc71;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="flex-container">
<div class="centered-box"></div>
</div>
Explication du code :
align-items: center;: centre les éléments verticalement
2. Centrage avec CSS Grid
CSS Grid offre des options puissantes pour centrer les éléments :
.grid-container {
display: grid;
place-items: center;
height: 100vh;
background-color: #9b59b6;
}
.centered-box {
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="grid-container">
<div class="centered-box"></div>
</div>
Explication du code :
display: grid;: définit le conteneur comme CSS Gridplace-items: center;: centre les éléments horizontalement et verticalement
3. Centrage vertical avec positionnement absolu et transformation CSS
L'utilisation du positionnement absolu et de la transformation CSS permet de centrer les éléments verticalement.
Exemple :
.container {
position: relative;
height: 100vh;
background-color: #e74c3c;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #3498db;
}
<div class="container">
<div class="centered-box"></div>
</div>
Explication du code :
position: absolute;: positionne l'élément absolument par rapport au conteneurtop: 50%;,left: 50%;: déplace l'élément de 50% à partir du bord supérieur et gauche du conteneurtransform: translate(-50%, -50%);: déplace l'élément de 50% de sa largeur et hauteur pour le centrer
4. Centrage vertical avec table et cellules
Utilisation de table et cellules pour centrer les éléments verticalement.
Exemple :
.table-container {
display: table;
width: 100%;
height: 100vh;
background-color: #f39c12;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-box {
display: inline-block;
background-color: #3498db;
padding: 20px;
color: white;
}
<div class="table-container">
<div class="table-cell">
<div class="centered-box">Élément centré</div>
</div>
</div>
Explication du code :
.table-container: crée un conteneur avec un displaytable.table-cell: crée une cellule de table avec alignement verticalmiddle
GO TO FULL VERSION