Fermé pour inventaire — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 8)

Fermé pour inventaire

Grid · niveau 1 (application)

Énoncé

Écrire une page « Fermé pour inventaire » dont le message (un titre et une phrase, dans un cadre crème aux coins arrondis) est centré horizontalement et verticalement dans la fenêtre, sur fond bleu nuit, quelle que soit la taille de la fenêtre. N'utiliser ni position, ni marges calculées.

Corrigé


body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  margin: 0;
  background: #1f3a68;
  font-family: system-ui, sans-serif;
}

.message {
  padding: 2rem 3rem;
  background: #faf8f5;
  border-radius: 8px;
  text-align: center;
}

Le corps est une grille d'une seule cellule, au moins aussi haute que la fenêtre (min-height: 100vh, et non height, pour que la page puisse s'allonger si le message grandit). place-items: center centre le message dans les deux directions. La marge par défaut du corps est retirée, sinon une barre de défilement apparaîtrait ( $100 vh$ plus 16 pixels de marges). Le message, en #1f3a68 sur fond crème, a un rapport de contraste de 10,6:1. La page complète est code/ch8/exercices/centrer.html.