Pour centrer horizontalement un élément de bloc (comme <div>), utilisez margin: auto;
Définir la largeur de l'élément l'empêchera de s'étendre jusqu'au bords de son contenant.
L'élément occupera alors la largeur spécifiée et l'espace restant sera réparti à parts égales entre les deux marges :
This div element is centered.
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>Hello World!</p>
</div>
</body>
</html>
Remarque : L'alignement central n'a aucun effet si la propriété width
n'est pas définie. (ou réglé à 100 %).
Pour centrer simplement le texte à l'intérieur d'un élément, utilisez text-align: center;
This text is centered.
.center {
text-align: center;
border: 3px solid green;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Conseil : Pour plus d'exemples sur la façon d'aligner le texte, consultez le chapitre Texte CSS.
Pour centrer une image, définissez les marges gauche et droite sur auto
et transformez-la en élément block
:
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
Une méthode pour aligner les éléments consiste à utiliser position: absolue;
:
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the position property</h2>
<p>An example of how to right align elements with the position property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Remarque : Les éléments positionnés en absolu sont supprimés du flux normal et peuvent chevaucher des éléments.
Une autre méthode pour aligner les éléments consiste à utiliser la propriété float
:
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the float property</h2>
<p>An example of how to right align elements with the float property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Remarque : Si un élément est plus grand que l'élément qui le contient et qu'il flotte, il débordera à l’extérieur de son contenant. Vous pouvez utiliser le "clearfix hack" pour résoudre ce problème (voir exemple ci-dessous).
Ensuite, nous pouvons ajouter le hack clearfix à l'élément conteneur pour corriger ce problème:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
Il existe de nombreuses façons de centrer verticalement un élément en CSS. Une solution simple consiste à utiliser un padding
supérieur et inférieur :
I am vertically centered.
.center {
padding: 70px 0;
border: 3px solid
green;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center vertically with padding</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
Pour centrer verticalement et horizontalement, utilisez padding
et text-align: center
:
I am vertically and horizontally centered.
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Center with padding and text-align</h2>
<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Une autre astuce consiste à utiliser la propriété line-height
avec une valeur égale à la propriété hauteur
:
I am vertically and horizontally centered.
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Center with line-height</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Si padding
et line-height
ne sont pas des options, une autre solution consiste à utiliser le positionnement et la propriété transform
:
I am vertically and horizontally centered.
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Conseil : Vous en apprendrez davantage sur la propriété de transformation dans nos transformations 2D. Chapitre.
Vous pouvez également utiliser flexbox pour centrer les éléments. Notez simplement que flexbox n'est pas pris en charge dans IE10 et les versions antérieures :
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Flexbox Centering</h2>
<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Conseil : Vous en apprendrez davantage sur Flexbox dans notre chapitre CSS Flexbox.