CSS Alignement Horizontal & Vertical
Centrer les éléments
horizontalement et verticalement
Centrage des éléments CSS
Avec CSS, vous pouvez centrer des éléments (horizontalement, verticalement ou les deux) en utilisant plusieurs méthodes, selon le type d'élément.
Alignement des éléments de bloc au centre
Utilisez margin: auto; pour centrer horizontalement un élément de niveau bloc (comme <div>).
Spécifiez également une largeur pour l'élément afin d'éviter qu'il ne s'étire jusqu'aux bords de son conteneur.
Remarque : L'alignement au centre n'a aucun effet sur les éléments de niveau bloc si la propriété largeur n'est pas définie (ou est définie à 100%).
Ci-dessous, l'élément <div> est centré et a une largeur de 50 % (l'espace restant sera réparti également entre les marges gauche et droite) :
Cet élément div est centré.
Exemple
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
} Alignement du texte au centre
Pour centrer le texte à l'intérieur d'un élément de niveau bloc, utilisez text-align: center; .
Ce texte est centré.
Exemple
p {
text-align: center;
} Astuce : Pour plus d'exemples sur la façon d'aligner le texte, consultez le chapitre CSS Text .
Alignement d'une image au centre
Pour centrer une image, définissez margin-left et margin-right à auto , et transformez également l'image en un élément block :
Exemple
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
} Alignement au centre avec Flexbox
Avec CSS flexbox , vous pouvez centrer des éléments, à la fois horizontalement et verticalement, à l'intérieur d'un conteneur flex.
Un conteneur flex avec les propriétés justify-content et align-items définies sur center alignera l'élément (ou les éléments) au centre (sur les deux axes) :
Exemple
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
} Alignement au centre avec Grid
Avec CSS grid , vous pouvez centrer des éléments, à la fois horizontalement et verticalement, à l'intérieur d'un conteneur grid.
Un conteneur grid avec la propriété place-items définie sur center alignera l'élément (ou les éléments) au centre (sur les deux axes).
Exemple
.center {
display: grid;
place-items: center;
height: 200px;
border: 3px solid green;
} Alignement à gauche et à droite - Utilisation de la position
Une autre méthode pour aligner des éléments est d'utiliser position: absolute; :
Remarque : Les éléments positionnés de manière absolue sont retirés du flux normal et peuvent chevaucher d'autres éléments.
Cet élément <div> est positionné à droite, avec la propriété position: absolute.
Exemple
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
} Alignement à gauche et à droite - Utilisation de float
Une autre méthode pour aligner un élément à gauche ou à droite est d'utiliser la propriété float :
Exemple
.right {
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
} Alignement au centre avec position et transform
Si vous traitez des éléments de dimensions inconnues ou dynamiques, il est courant d'utiliser position: absolute; combiné avec transform: translate(); pour centrer un élément :
Je suis centré verticalement et horizontalement.
Exemple
.container p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} Astuce : Vous en apprendrez plus sur la propriété transform dans notre Chapitre sur les Transformations 2D .