Agencement des pages HTML avec CSS

Comment centrer un élément, aligner calques, et...

Centrer la page horizontalement

Une solution très simple est donnée par la spécification du W3C. Quand la propriété margin-left et margin-right ont la valeur auto, le contenu se trouve centré horizontalement. Donc pour centrer la page entière, il faut créer un calque global contenant tous les autres (cela ne fonctionne pas sur body) et lui attribuer cette propriété:

#outer { margin:0 auto;}

Cela peut s'appliquer à tout élément de la page.

Placer un élément au milieu d'une page HTML (parfaitement centré)

Donc centrer à la fois verticalement et horizontalement. Avec ce code CSS plutôt simple et compatible avec tout navigateur depuis IE8:

.centered
{
  position:absolute;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  height:50%;
  width:50%;
}

Les dimensions peuvent être absolues ou en pourcentage. Cela peut servir à créer une lightbox avec la propriété display:none que l'on modifie dynamiquement en display:block.

Aligner côte à côte deux sections de la page

Par exemple si on insère une image dans le texte et que l'on ne veuille pas que le texte entoure l'image, mais qu'on contraire il soit disposé contre elle dans une même colonne.
On utilise les propriétés float et overflow:

<img src="images/html5-logo.png" width="64" height="64" style="float:left">
<div style="overflow:hidden;">...texte...</div>

Remplir l'espace dans une balise div

Quand on attribue une hauteur de 100% a un calque, il remplit l'espace du calque qui le contient. Le problème est que si l'on ajoute un autre élément, l'ensemble va déborder du calque qui les contient. Avec overflow:hidden, une partie sera cachée.
Alors comment faire pour remplir l'espace d'un conteneur? Sans utiliser une hauteur fixe, car il faut adapter les tailles à celle de la fenêtre, ce que l'utilisateur peut changer. La solution consiste à donner une propriété padding-bottom au calque conteneur, dont la hauteur sera celle du second élément. Exemple:

<div style="padding:bottom:10px">
  <div style="height:100%"></div>
  <div style="height:10px"></div>
</div>

Si l'on veut conserver la hauteur du conteneur, il faudra ajouter la propriété box-sizing, comme indiqué sur cette page.
La padding a pour effet de réduire les 100% de la hauteur indiquée ce qui ménage de la place pour le second élément et évite le débordement.

Voir aussi:

Interface d'application HTML. Agencement du contenu d'une page qui s'ajuste entièrement à la taille de la fenêtre.