Centrer un élément bloc dans une page en CSS


Ce code montre comment centrer horizontalement un élément bloc par rapport à son parent.
Catégories associées : Scripts
Technologies associées : CSS

Prérequis :

Le bloc à centrer doit avoir une largeur définie.

En utilisant la valeur "auto" de la propriété css margin, l'élément enfant se centre automatiquement dans son parent. code : 
<div id="example-parent">
    <div id="example-child-to-center">
        bloc centré
    </div>
</div>
<style type="text/css">
#example-parent {
    border: 1px black solid;
}
#example-child-to-center {
    width: 100px;
    background-color: grey;
    height: 30px;
    margin: auto;
}
</style>
bloc centré