Centrer un bloc / du texte en CSS

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 :

[html]
<div id="mon-bloc">
Du texte à centrer
</div> <!– /mon-bloc –>
[/html]

[css]
#mon-bloc {
margin-left:auto;
margin-right:auto;
}
[/css]

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.

[html]
<div id="mon-bloc">
Du texte à centrer
</div> <!– /mon-bloc –>
[/html]

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

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

[html]
<div id="mon-bloc">
Du texte à centrer
</div> <!– /mon-bloc –>
[/html]

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