Dokumentacja CSS z przykładami: Wyśrodkowanie diva

Q: Jak wyśrodkować div w poziomie i w pionie?

Zamień rodzica w siatkę i wyśrodkuj jej zawartość: .parent { display: grid; place-items: center; }. Wersja z flexboxem to display: flex; justify-content: center; align-items: center;. W obu przypadkach rodzic musi być wyższy niż div.

Q: Jak wyśrodkować div tylko w poziomie?

Nadaj mu szerokość i automatyczne marginesy boczne: .box { width: 300px; margin: 0 auto; } (albo max-width dla responsywnego bloku). margin-inline: auto to to samo we właściwościach logicznych.

Q: Jaki jest najprostszy sposób na wyśrodkowanie diva?

display: grid; place-items: center; na rodzicu: dwie deklaracje, obie osie, dziecko dowolnego rozmiaru. Użyj flexboxa, gdy rodzic układa w rzędzie także inne elementy.

Q: Jak wyśrodkować tekst w divie?

Użyj text-align: center na divie dla tekstu i treści liniowej. Wyśrodkowanie samego diva i wyśrodkowanie tekstu w nim to dwa osobne zadania.

Krótka odpowiedź

Żeby wyśrodkować div w poziomie i w pionie wewnątrz rodzica, zamień rodzica w siatkę i wyśrodkuj jej zawartość:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

To działa dla dziecka dowolnego rozmiaru i nie wymaga niczego na samym dziecku. Poniżej sześć metod obok siebie. Każde pudełko mierzy się po wyrenderowaniu i pokazuje, jak daleko jego środek jest od środka rodzica:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Wszystkie sześć pokazuje 0px w obu osiach (obramowanie sceny 1px jest równe z każdej strony, więc nie przesuwa środka). Zmień szerokość albo tekst pudełka i uruchom ponownie: metody, które nie zależą od stałego rozmiaru, zostają na 0.

Której metody użyć

Metoda	Wyśrodkowuje	Dziecko potrzebuje stałego rozmiaru?	Najlepsza do
Grid `place-items: center`	Obie osie	Nie	Wybór domyślny: jedno dziecko w pudełku
Flexbox `justify-content` + `align-items`	Obie osie	Nie	Rząd albo kolumna elementów wyśrodkowanych jako grupa
`margin: auto` w rodzicu flex albo grid	Obie osie	Nie	Wyśrodkowanie jednego elementu, gdy rodzeństwo jest ułożone inaczej
`margin: 0 auto`	Tylko w poziomie	`width` albo `max-width`	Kontenery strony, artykuły, formularze w zwykłym przepływie
Absolute + `translate(-50%, -50%)`	Obie osie	Nie	Nakładki, znaczki i okna modalne nad inną treścią
Absolute + `inset: 0; margin: auto`	Obie osie	Tak, szerokość i wysokość	Okna dialogowe o stałym rozmiarze
`align-content: center` na bloku	W pionie	Nie	Wyśrodkowanie w pionie bez zmiany display rodzica

Metoda 1: flexbox

Flexbox wyśrodkowuje w dwóch osiach za pomocą dwóch właściwości. justify-content obsługuje oś główną (w rzędzie poziomą), a align-items oś poprzeczną:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Przy kilku dzieciach flexbox wyśrodkowuje je jako grupę i trzyma je w rzędzie. Tu wygrywa z gridem, który ustawiłby trzy elementy jeden pod drugim w wyśrodkowanej kolumnie. Wszystkie wartości wyrównania omawia strona o justify-content.

Metoda 2: grid

place-items: center to skrót od align-items: center razem z justify-items: center. W kontenerze grid z jednym dzieckiem wyśrodkowuje je w obu kierunkach:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height zamiast height pozwala rodzicowi urosnąć, jeśli karta stanie się wyższa niż 180px, zamiast pozwolić karcie wystawać.

Metoda 3: margin: 0 auto (w poziomie)

Element blokowy o szerokości mniejszej niż kontener można wyśrodkować w poziomie automatycznymi marginesami bocznymi. Przeglądarka dzieli wolne miejsce po równo między obie strony:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

Drugie pudełko wypełnia całą szerokość, więc nie ma wolnego miejsca i nic się nie przesuwa. To zwykły powód, dla którego margin: 0 auto "nie działa". Wyśrodkowuje też tylko w poziomie w zwykłym przepływie; pionowe marginesy auto stają się tam 0. Jednak w rodzicu flex albo grid margin: auto wyśrodkowuje w obu kierunkach, co pokazuje trzecie pudełko w porównaniu powyżej.

Metoda 4: pozycja absolutna i transform

Gdy element musi leżeć nad inną treścią (znaczek na zdjęciu, okno modalne nad stroną), ustaw go absolutnie na 50% i cofnij o połowę jego własnego rozmiaru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% stawia lewy górny róg elementu w środku. Procenty w translate() odnoszą się do własnego rozmiaru elementu, więc -50% cofa go o połowę jego szerokości i wysokości, jakiekolwiek by one były. Rodzic musi być pozycjonowany (position: relative), bo inaczej element wyśrodkuje się na stronie. Pozycjonowanie omawia strona o position.

Wariant dla elementów o znanym rozmiarze: position: absolute; inset: 0; margin: auto; razem z width i height. Automatyczne marginesy dzielą miejsce ze wszystkich czterech stron.

Metoda 5: align-content na zwykłym bloku

align-content: center działa teraz także na zwykłych kontenerach blokowych, nie tylko flex i grid. Wyśrodkowuje zawartość w pionie bez zmiany sposobu układania dzieci:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Obsługują to obecne wersje Chrome, Firefoksa i Safari. Starsze przeglądarki to ignorują, więc jeśli musisz je wspierać, użyj grida.

Wyśrodkowanie na całym ekranie

Żeby wyśrodkować okno dialogowe w obszarze widoku bez względu na przewijanie, połącz stałą warstwę na cały ekran z gridem:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Do wyśrodkowania w pionie zawartości całej strony użyj na rodzicu min-height: 100dvh zamiast 100vh: na telefonach 100vh obejmuje obszar za paskami narzędzi przeglądarki, więc "środek" wypada za nisko.

Wyśrodkowanie tekstu to inne zadanie

Wszystko powyżej wyśrodkowuje pudełko. Żeby wyśrodkować tekst w pudełku, użyj na nim text-align: center, jak pokazuje strona o wyśrodkowaniu tekstu w HTML. Często potrzebujesz obu: grida do wyśrodkowania karty i text-align do wyśrodkowania linii w niej.

Częste błędy

Rodzic bez wysokości. Wyśrodkowanie w pionie wymaga wolnego miejsca; rodzic, który kurczy się do zawartości, go nie ma.
margin: 0 auto na bloku o pełnej szerokości. Najpierw nadaj mu width albo max-width.
margin: auto do wyśrodkowania w pionie w zwykłym przepływie. Pionowe marginesy auto wynoszą tam 0; użyj flex albo grid.
Wyśrodkowanie absolutne bez pozycjonowanego rodzica. Element wyśrodkowuje się na stronie, a nie w pudełku.
align-items: center na dziecku. Właściwości wyrównania ustawia się na rodzicu (kontenerze flex albo grid), z wyjątkiem margin: auto i align-self.
text-align: center do wyśrodkowania bloku. Wyśrodkowuje treść liniową (tekst, obrazy, dzieci inline-block), a nie dziecko blokowe.

Najczęściej zadawane pytania

Jak wyśrodkować div w poziomie i w pionie?

Zamień rodzica w siatkę i wyśrodkuj jej zawartość: .parent { display: grid; place-items: center; }. Wersja z flexboxem to display: flex; justify-content: center; align-items: center;. W obu przypadkach rodzic musi być wyższy niż div.

Jak wyśrodkować div tylko w poziomie?

Nadaj mu szerokość i automatyczne marginesy boczne: .box { width: 300px; margin: 0 auto; } (albo max-width dla responsywnego bloku). margin-inline: auto to to samo we właściwościach logicznych.

Dlaczego margin: 0 auto nie wyśrodkowuje mojego diva?

Div nie ma szerokości mniejszej niż kontener, więc nie ma wolnego miejsca do podziału (blok domyślnie wypełnia całą szerokość). Ustaw width albo max-width. Nie działa to też na elementach liniowych i nigdy nie wyśrodkowuje w pionie w zwykłym przepływie.

Dlaczego mój div nie wyśrodkowuje się w pionie?

Rodzic jest tylko tak wysoki jak jego zawartość, więc nie ma dodatkowego miejsca do wyśrodkowania. Nadaj rodzicowi wysokość (albo min-height), a potem użyj wyśrodkowania przez grid albo flexbox.

Jaki jest najprostszy sposób na wyśrodkowanie diva?

display: grid; place-items: center; na rodzicu: dwie deklaracje, obie osie, dziecko dowolnego rozmiaru. Użyj flexboxa, gdy rodzic układa w rzędzie także inne elementy.

Jak wyśrodkować tekst w divie?

Użyj text-align: center na divie dla tekstu i treści liniowej. Wyśrodkowanie samego diva i wyśrodkowanie tekstu w nim to dwa osobne zadania.

Powiązane zagadnienia