Une page bien centrée

🎯 Objectif

Apprendre la recette de mise en page la plus utilisée du web. Deux lignes, et ta page arrête de s'étaler d'un bord à l'autre de l'écran.

📖 Exemple

La page d'accueil de la bibliothèque du Coteau tient dans un conteneur plafonné et centré — regarde la fenêtre : le bloc blanc flotte au milieu, du gris de chaque côté :

<div class="fiche">
    <h2>Bibliothèque du Coteau</h2>
    <p>Ouverte du mardi au samedi. Le prêt est gratuit pour les moins de seize ans.</p>
</div>

body {
    margin: 0;
    background-color: #f5f5f4;
}

.fiche {
    max-width: 220px;
    margin: 0 auto;
    padding: 16px;
    background-color: #ffffff;
}

Pourquoi ces deux déclarations ? max-width plafonne : jamais plus de 220 pixels, mais libre de rétrécir si la fenêtre est plus étroite. Une largeur figée, elle, déborderait dans une fenêtre plus petite — avec une barre de défilement horizontale, le défaut le plus détesté du web mobile. Ensuite, margin avec le mot-clé auto sur les côtés demande au navigateur de partager la place restante à parts égales : c'est ça, centrer un bloc.

💡 Sur un vrai site, on plafonne plutôt entre 700 et 900 pixels : un œil lit confortablement des lignes de 60 à 70 caractères, au-delà il se perd en revenant à la ligne. Retiens le principe plutôt que le nombre — on ne plafonne pas une page pour faire joli, on la plafonne pour qu'elle reste lisible.

📝 Consigne

La présentation de Rock'Air s'étale d'un bord à l'autre. Même recette que l'exemple, autre page, autre plafond — ajoute deux déclarations à la règle .page, dans l'onglet CSS :

1. Plafonne la largeur à 300 pixels avec max-width — pas la largeur figée.
2. Partage la place restante avec margin : rien en haut et en bas, auto à gauche et à droite.

Puis rétrécis le panneau d'aperçu sous 300 pixels, et observe.

Petite honnêteté : le mot-clé auto disparaît avant même d'arriver à l'écran — le navigateur le remplace par des pixels calculés en direct. Impossible de le mesurer : c'est ton code qui est relu ici. La preuve visuelle, elle, est dans l'aperçu, et elle est imparable : le bloc est au milieu, ou il ne l'est pas.