Sur cette page, vous apprendrez comment centrer horizontalement un DIV à l'aide de CSS en utilisant la propriété margin.
Si vous souhaitez centrer un élément <div> horizontalement par rapport à l'élément parent, vous pouvez utiliser la propriété CSS margin avec la valeur auto pour les côtés gauche et droit, c'est-à-dire définir la règle de style margin : 0 auto ; pour l'élément div. La valeur auto ajuste automatiquement les marges gauche et droite et centre horizontalement le bloc de l'élément div.
Toutefois, cette solution ne fonctionne que si la largeur de l'élément parent est supérieure à celle de l'élément div que vous souhaitez aligner. Voici un exemple :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Horizontally Center a Div Using CSS</title>
<style>
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div class="container">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</div>
</body>
</html>
Résultat
Et c'est tout sur comment centrer horizontalement un DIV à l'aide de CSS en utilisant la propriété margin.
