Centrowanie div w CSS: w poziomie, w pionie, Flexbox i Grid

Centrowanie diva w CSS długo wymagało sztuczek. Już nie: trzy linijki Flexboksa centrują dowolny element w jego kontenerze, w poziomie i w pionie. Ten artykuł zaczyna się od tej krótkiej odpowiedzi, a potem omawia każdą sytuację z osobna, od wyśrodkowania obrazu po przycisk, z alternatywą w Gridzie i błędami, przez które wydaje się, że „to nie działa”.

Krótka odpowiedź

.conteneur {
  display: flex;
  justify-content: center; /* poziomo */
  align-items: center;     /* pionowo */
}

<div class="conteneur">
  <div class="boite">Je suis centrée</div>
</div>

Obie właściwości ustawia się na rodzicu, nigdy na centrowanym elemencie. A centrowanie w pionie widać dopiero wtedy, gdy rodzic jest wyższy niż jego zawartość: to pierwsza rzecz do sprawdzenia, kiedy nic się nie rusza.

Centrowanie w poziomie

Za pomocą Flexboksa

justify-content rozkłada dzieci wzdłuż osi głównej, domyślnie poziomej. center zbiera je na środku.

.conteneur {
  display: flex;
  justify-content: center;
  gap: 1rem; /* odstęp między kilkorgiem wyśrodkowanych dzieci */
}

Przy kilkorgu dzieciach zostają one obok siebie, wyśrodkowane jako grupa. Tak jest z dwoma akapitami albo dwoma obrazami z pierwotnego przykładu w tym artykule.

Za pomocą margin auto

Bez Flexboksa blok o znanej szerokości centruje się marginesami automatycznymi:

.boite {
  width: 320px;      /* albo max-width: konieczne */
  margin: 0 auto;
}

Bez width ani max-width pudełko zajmuje całą dostępną szerokość, a marginesy automatyczne mają zerową wartość. To metoda do zapamiętania, gdy chcesz wyśrodkować kolumnę treści na stronie.

Za pomocą text-align

text-align: center centruje zawartość liniową bloku: tekst, link, obraz inline. Nie centruje samego bloku w jego rodzicu.

.titre {
  text-align: center; /* centruje tekst wewnątrz .titre */
}

Centrowanie w pionie

align-items odpowiada za oś poprzeczną, domyślnie pionową. Kontener musi mieć wysokość, żeby centrowanie było widoczne.

.conteneur {
  display: flex;
  align-items: center;
  height: 300px;
}

Aby wyśrodkować w pionie tylko jedno dziecko, a resztę zostawić u góry, na tym dziecku ustawia się align-self:

.conteneur .dernier {
  align-self: center;
}

Inny zapis, często krótszy: margin: auto na dziecku kontenera flex centruje je w obu kierunkach, pochłaniając całą wolną przestrzeń.

.conteneur { display: flex; height: 300px; }
.boite     { margin: auto; }

Centrowanie na całej stronie

Ekran logowania, komunikat o błędzie, strona oczekiwania: element ma być na środku okna. Kontener zajmuje całą widoczną wysokość dzięki min-height: 100vh.

body {
  margin: 0;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 100% wysokości okna */
}

min-height zamiast height: jeśli treść nie mieści się w oknie na małym ekranie, kontener się powiększy, zamiast ją uciąć. Na telefonie 100dvh (wysokość dynamiczna, uwzględniająca paski przeglądarki) jest jeszcze dokładniejsze i obsługiwane przez aktualne przeglądarki.

Centrowanie obrazu

Obraz jest elementem liniowym: wewnątrz bloku text-align: center na rodzicu centruje go w poziomie. Do wyśrodkowania w obu kierunkach albo w ramce o stałym rozmiarze prościej użyć Flexboksa.

/* Tylko w poziomie */
figure {
  text-align: center;
}

/* W poziomie i w pionie, w kwadratowej miniaturze */
.vignette {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.vignette img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Pojedynczy obraz w kolumnie centruje się też jako blok: display: block; margin: 0 auto; z szerokością albo szerokością maksymalną.

Centrowanie tekstu i przycisku

Tekst centruje się właściwością text-align: center na jego bloku. Przycisk jest elementem inline-block: ta sama właściwość na rodzicu centruje go w poziomie.

.actions {
  text-align: center;
}

/* Do wyśrodkowania kilku przycisków z równym odstępem */
.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

Aby wyśrodkować tekst wewnątrz przycisku o stałej wysokości, sam przycisk staje się kontenerem flex: display: inline-flex; align-items: center; justify-content: center;.

Alternatywa w Gridzie: jedna linijka

CSS Grid centruje pojedyncze dziecko jedną deklaracją:

.conteneur {
  display: grid;
  place-items: center; /* align-items + justify-items */
  min-height: 100vh;
}

Grid i Flexbox dają tu ten sam wynik. Grid jest krótszy dla jednego elementu; Flexbox pozostaje naturalniejszy, gdy trzeba ułożyć rząd elementów. Wybór między oboma modelami dla całego układu strony opisuje Grid czy Flexbox.

position absolute + transform: przypadek nakładek

Kiedy centrowany element jest wyjęty z układu, na przykład dymek albo okno modalne położone nad stroną, ustawia się go na 50%, a potem cofa o połowę jego własnego rozmiaru:

.parent {
  position: relative;
}

.modale {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Metoda działa bez znajomości rozmiaru elementu, ale może lekko rozmyć tekst, gdy przesunięcie wypadnie na pół piksela. W przypadku modala na pełny ekran kontener position: fixed; inset: 0; display: grid; place-items: center; unika tego problemu.

Dlaczego „to nie działa”: pięć błędów

1. Rodzic nie ma wysokości. Centrowanie w pionie odnosi się do wysokości kontenera; bez wysokości nie ma czego centrować. Dodaj min-height.
2. Właściwości są na dziecku. justify-content i align-items idą na rodzica. Na dziecku działają tylko align-self i margin: auto.
3. margin: 0 auto bez szerokości. Blok zajmuje już 100%: nadaj mu width albo max-width.
4. text-align: center do wyśrodkowania diva. Centruje tekst w środku, a nie samo pudełko. Użyj Flexboksa albo marginesów automatycznych.
5. height: 100%, które nic nie daje. Wysokość procentowa działa tylko wtedy, gdy rodzic sam ma zdefiniowaną wysokość, aż do html. 100vh i 100dvh nie zależą od rodzica.

Podsumowanie

Aby wyjść poza samo centrowanie, kompletny przewodnik po Flexboksie omawia wszystkie właściwości kontenera i jego dzieci.