Centrer un bloc dans la page

© Paladin. Document créé le 18 mai 2007 , mis à jour le 1er février 2011.

Qu'importe le flacon, pourvu qu'on ait l'ivresse. Alfred de Musset

Accueil du site > Astuces > CSS > Centrer un bloc dans la page

CSS / Firefox-2, IE6, IE7, Opera9

Dans la série "exemple" : centrer une boite dans une page Internet.

Vous trouverez sans peine d’autres exemples de ce type grâce aux moteurs de recherche.

L’exercice ici illustre l’emploi du positionnement relatif et absolu de blocs, sans user de tableaux, ni "line-heigh" ou autres astuces rencontrées sur le net.

Testé sur Firefox 2, Internet Explorer 6 et 7, Opera 9.

Le résultat recherché

Un bloc centré dans la page, tel que :

PNG

Pour l’obtenir :
- forcer la hauteur de la fenêtre à son maximum apparent ;
- centrer le bloc par position absolue.

Forcer la hauteur de la fenêtre

Avant tout, forcer la hauteur du document, sinon, le résultat obtenu est :

PNG

En forcant la hauteur de html :

html {
        height:100%;
}

l’objet prend toute la place qui lui est disponible. Ainsi, lorsque la fenêtre est réduite, vous obtenez :

PNG

Code HTML/CS

Le code HTML, commenté :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
        Exemple Center un bloc dans une page
        http://www.quesaco.org/
        Fri May 18 08:36:43 CEST 2007
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exemple : centrer un bloc dans une page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" href="quesaco.ico" />
<style type="text/css">
<!--
html {
        height:100%; /* force à prendre toute la hauteur disponible */
        background-color: #0cc;
}
body {
        margin:0;        /* unifie le margin de tous */
        padding:4px; /* en guise de border */
        height:100%; /* force à prendre toute la hauteur disponible */
        background-color: #ccc;
        text-align: center; /* centre #bloc sur IE6 */
}
#body-content {
        background-color: #c0c;
        height:100%; /* force à prendre toute la hauteur */
        position:relative;
}
#bloc {
        width:50%;
        line-height:50%;
        height:50%;
        position:absolute;
        left:25%;
        top:25%;
        background-color: #00c;
}
.caption {
                /* petite étiquette de bloc */
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: normal;
        font-variant: small-caps;
        line-height:1.2em;
        color: #666666;
        background-color: #fff;
        border:1px solid black;
        margin-left:5px;
        position:absolute;
        top:-2px;
        left:5px;
        padding:0 5px;
}
-->
</style>
</head>

<body>
<div id="body-content"> <span class="caption">Body</span>
  <div id="bloc"><span class="caption">Bloc</span>
  </div>
</div>
</body>
</html>

Le fichier HTML, compressé, si besoin :

Zip - 942 octets

A noter:

A découvrir :
- FAQ sur Alsacreations.

Plussoyez !

Les forums sont fermés.