Snippet

Ceux qui font de l’intégration web le savent, autant il est facile de centrer un élément horizontalement, autant le faire verticalement peut être délicat.

Centrage horizontal :

<div id="mon-bloc">
    Du texte à centrer
</div>   <!-- /mon-bloc -->

#mon-bloc {
    margin-left:auto;
    margin-right:auto;
}

Et le centrage vertical en plus :

Alors là, c’est plus compliquer.

Pour centrer un bloc horizontalement et verticalement, il nous connaitre les dimensions de celui-ci. Il faut (malheureusement) contourner le problème en utilisant des marges négatives.

<div id="mon-bloc">
    Du texte à centrer
</div>    <!-- /mon-bloc -->

#mon-bloc {
    height:200px;
    left:50%;
    margin:-100px 0 0 -200px;
    position:absolute;
    top:50%;
    width:400px;
}

Pour centrer verticalement du texte, la solution est plus simple : il faut jouer sur l’interlignage.

<div id="mon-bloc">
    Du texte à centrer
</div>    <!-- /mon-bloc -->

#mon-bloc {
    background:red;
    height:200px;
    line-height:200px;
    text-align:center;
}