Centrer un bloc dans la page

L'idéal quand on veut être admiré, c'est d'être mort. Michel Audiard

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 :

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 :

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 :

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>