Source: CSS Tricks
Horizontalement
Est-ce que c'est un élément inline (texte, liens, etc.)?
Cela fonctionne pour les éléments inline, inline-block, inline-table, inline-flex, etc.
.center {
text-align: center;
}See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.
Est-ce que c'est un élément block?
En mettant margin-left:auto; et margin-right:auto;, et si l’élément a une largeur définie (sinon il prendra toute la largeur et n’a pas besoin d’être centré)
.center-me {
margin: 0 auto;
}See the Pen Centering Single Block Level Element by Chris Coyier (@chriscoyier) on CodePen.
Est-ce qu'il y a plusieurs éléments block?
Si vous avez deux éléments ou plus au niveau du bloc qui doivent être centrés horizontalement dans une rangée, il est probable qu’il soit préférable de leur attribuer un type d’affichage différent. Voici un exemple d’affichage inline-block et un exemple d’affichage flexbox:
See the Pen Centering Row of Blocks by Chris Coyier (@chriscoyier) on CodePen.
À moins que vous ne vouliez dire que vous avez plusieurs éléments de niveau bloc empilés les uns sur les autres, auquel cas la technique de la marge automatique est toujours valable:
See the Pen Centering Blocks on Top of Each Other by Chris Coyier (@chriscoyier) on CodePen.
Verticalement
Est-ce que c'est un élément inline (texte, liens, etc.)?
Est-ce que c'est une seule ligne?
Parfois, les éléments de texte en ligne peuvent apparaître centrés verticalement, simplement parce qu’il y a un rembourrage égal au-dessus et au-dessous d’eux.
.link {
padding-top: 30px;
padding-bottom: 30px;
}See the Pen Centering text (kinda) with Padding by Chris Coyier (@chriscoyier) on CodePen.
Est-ce que c'est multiligne?
Le plus simple serait en utilisant flexbox, on peut avoir un simple enfant flexible centré dans un parent flexible assez facilement. Rappelez-vous que cela n’est vraiment pertinent que si le conteneur parent a une hauteur fixe (px, %, etc.), ce qui explique pourquoi le conteneur a une hauteur.
.flex-center-vertically {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
See the Pen Vertical Center Multi Lines of Text with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Est-ce que c'est un élément block?
Savez-vous la hauteur de l'élément?
Il est assez courant de ne pas connaître la hauteur dans la mise en page d’une page web, pour de nombreuses raisons : si la largeur change, la refonte du texte peut modifier la hauteur. La variation du style du texte peut modifier la hauteur. La variation de la quantité de texte peut modifier la hauteur. Les éléments dont le rapport hauteur/largeur est fixe, comme les images, peuvent changer de hauteur lorsqu’ils sont redimensionnés. Etc.
Mais si vous connaissez la hauteur, vous pouvez centrer verticalement comme :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
See the Pen Center Block with Fixed Height by Chris Coyier (@chriscoyier) on CodePen.
La hauteur est inconnue?
Il est encore possible de le centrer en le remontant de moitié après l’avoir abaissé de moitié :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}See the Pen Center Block with Unknown Height by Chris Coyier (@chriscoyier) on CodePen.
Cela vous importe-t-il que l'élément s'étende jusqu'à la hauteur du conteneur ?
Si ce n’est pas le cas et que vous avez simplement besoin que le contenu soit centré verticalement, l’utilisation de tableaux ou d’un affichage CSS pour transformer les éléments en tableaux peut faire l’affaire.
See the Pen Center Block with Table Stretch by Chris Coyier (@chriscoyier) on CodePen.
Flexbox possible?
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}See the Pen Center Block with Unknown Height with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Horizontalement et verticalement
L'élément a-t-il une largeur et une hauteur fixes ?
L’utilisation de marges négatives égales à la moitié de la largeur et de la hauteur, après avoir positionné l’image à 50 % / 50 %, permet de centrer l’image avec un excellent support inter-navigateurs :
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}See the Pen Center Block with Fixed Height and Width by Chris Coyier (@chriscoyier) on CodePen.
La largeur et la hauteur de l'élément sont-elles inconnues ?
Si vous ne connaissez pas la largeur ou la hauteur, vous pouvez utiliser la propriété transform et une translation négative de 50 % dans les deux directions (elle est basée sur la largeur/hauteur actuelle de l’élément) pour centrer :
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}See the Pen Center Block with Unknown Height and Width by Chris Coyier (@chriscoyier) on CodePen.
Pouvez-vous utiliser flexbox ?
Pour centrer dans les deux sens avec flexbox, vous devez utiliser deux propriétés de centrage :
.parent {
display: flex;
justify-content: center; /* centre horizontalement */
align-items: center; /* centre verticalement */
}See the Pen Center Block with Unknown Height and Width with Flexbox by Chris Coyier (@chriscoyier) on CodePen.
Pouvez-vous utiliser grid ?
Il s’agit d’une petite astuce (par Lance Janssen) qui fonctionne à peu près pour un seul élément :
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}See the Pen Centering with Grid by Chris Coyier (@chriscoyier) on CodePen.