Problème
Centrer horizontalement un div positionné de manière absolue à l'aide de CSS.
Comment centrer horizontalement un div positionné de manière absolue à l'aide de CSS ?
Par : TutorialsGrey, le 28 Novembre 2022
Solution
Vous pouvez aligner horizontalement au centre tout élément <div> à position absolue ou fixe en utilisant la propriété CSS margin en combinaison avec les propriétés left et right position.
Voici un exemple pour comprendre comment cela fonctionne réellement :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Alignement central d'éléments à positionnement absolu avec CSS</title>
<style>
.box {
width: 50%;
position: absolute;
z-index: 99;
margin: 0 auto;
left: 0;
right: 0;
padding: 20px;
background: lightblue;
}
</style>
</head>
<body>
<div class="box">
<h1>Titre</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Résultat
