Jak wyśrodkować diva: wszystkie metody obok siebie
Jak wyśrodkować diva
Jak wyśrodkować diva: 7 metod CSS na żywo i w porównaniu | We.Inc
Wyśrodkuj diva w poziomie, w pionie lub w obu osiach. Przełączaj flexbox, grid, margin auto, pozycjonowanie absolutne, text-align i line-height na jednym pudełku, zobacz CSS i sprawdź, kiedy każda metoda zawodzi.
Wyśrodkowanie diva w obu osiach to dwie linie na rodzicu: display: grid; place-items: center; albo display: flex z justify-content: center i align-items: center. Tylko w poziomie wystarczy nadać divowi szerokość i margin-inline: auto. Aby wyśrodkowanie w pionie było widoczne, rodzic musi być wyższy niż dziecko.
Wersja skrócona
Potrzeba
CSS na rodzicu
Tailwind
W obu osiach
display: grid; place-items: center
grid place-items-center
W obu osiach
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Blok w poziomie
(na dziecku) margin-inline: auto + szerokość
mx-auto w-…
Nad obrazem
position: relative, dziecko inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Wybierz metodę i oś, a pudełko w demie się przesunie, CSS dla rodzica i dziecka zostanie wypisany, a notatka powie, gdzie ta metoda zawodzi. Omówionych jest siedem technik, w tym stare, które wciąż spotkasz w istniejącym kodzie, a na końcu tabela decyzyjna, która pomoże wybrać.
Wybierz poziom, pion lub obie osie.
Przeklikaj metody. Metody, które nie radzą sobie z wybraną osią, mówią o tym wprost, zamiast udawać.
Przeczytaj notatkę o ograniczeniach metody, a potem skopiuj CSS lub klasy Tailwind.
Gdy nie wiesz, której użyć, sprawdź tabelę decyzyjną poniżej.
Gdy coś nie chce się wyśrodkować w pionie, najpierw obrysuj rodzica. W dziewięciu przypadkach na dziesięć jest tylko tak wysoki jak jego zawartość.
W nowym kodzie wybieraj grid lub flex. Zostawiają dziecko w przepływie, więc rodzic nadal rośnie wokół niego.
Aby wyśrodkować blok tekstu, a jego wiersze zostawić wyrównane do lewej, wyśrodkuj blok przez margin-inline: auto i nie ruszaj text-align.
margin: auto na dziecku flexa to zgrabna sztuczka: pochłania wolne miejsce z każdej strony i wyśrodkowuje tylko ten jeden element.
Najczęściej zadawane pytania
Dlaczego mój div nie chce się wyśrodkować w pionie?
Zwykle dlatego, że rodzic nie ma dodatkowej wysokości. Blok jest tylko tak wysoki jak jego zawartość, więc nie ma przestrzeni, w której można by go wyśrodkować. Nadaj rodzicowi height, min-height (na przykład 100dvh dla pełnego ekranu) albo pozwól mu się rozciągnąć w wyższym układzie flex lub grid.
Jaki jest najkrótszy sposób na wyśrodkowanie diva?
display: grid; place-items: center; na rodzicu. Wyśrodkowuje dziecko w obu osiach, działa dla dziecka dowolnego rozmiaru i nie wymaga nadawania dziecku szerokości ani wysokości.
Jak wyśrodkować diva na całej stronie?
Nadaj body lub kontenerowi co najmniej wysokość viewportu: min-height: 100dvh; display: grid; place-items: center;. Dla okna modalnego unoszącego się nad stroną użyj position: fixed; inset: 0; margin: auto; z ustaloną szerokością i wysokością albo natywnego elementu dialog, który wyśrodkowuje się sam.
Czy margin: 0 auto nadal działa?
Tak, do wyśrodkowania w poziomie bloku, którego szerokość jest mniejsza niż szerokość rodzica. margin-inline: auto to nowoczesna forma logiczna, która nie zmienia marginesów górnego i dolnego.
Jak wyśrodkować diva w Tailwind?
Dodaj rodzicowi flex items-center justify-center albo grid place-items-center i nadaj mu wysokość, na przykład h-screen lub min-h-dvh. Dla bloku wyśrodkowanego w poziomie dodaj dziecku mx-auto oraz szerokość lub max-width.
Dwa kierunki, dwa różne problemy
Wyśrodkowanie w poziomie jest łatwe w układzie blokowym, bo szerokość jest znana: szerokość rodzica wyznacza jego kontener, więc automatyczne marginesy mogą podzielić pozostałe miejsce. Z wysokością jest odwrotnie, decyduje o niej zawartość, i dlatego wyśrodkowanie w pionie przez lata wymagało sztuczek.
Flexbox i grid to zmieniły, pozwalając rodzicowi rozdzielać wolne miejsce w obu osiach. Gdy rodzic ma znaną wysokość, właściwości wyrównania robią resztę, a dziecko pozostaje w normalnym przepływie.
Kiedy stare metody nadal mają sens
Pozycjonowanie absolutne jest właściwe, gdy wyśrodkowany element ma unosić się nad inną treścią, na przykład przycisk odtwarzania nad miniaturą wideo albo spinner nad kartą. Wersja z inset i margin auto unika rozmytych krawędzi na połówkach pikseli, które może dać translate.
text-align to nadal najszybszy sposób na wyśrodkowanie ikony lub przycisku inline w wierszu tekstu. Wyśrodkowanie przez line-height pasuje tylko do jednowierszowych plakietek, nad którymi masz pełną kontrolę.
Tabela decyzyjna
Która metoda do jakiego zadania
Metoda
Poziom
Pion
Obie osie
Na co uważać
Flexbox
Tak
Tak
Tak
Wyśrodkowanie w pionie wymaga, by rodzic był wyższy niż dziecko. Przy flex-direction: column obie właściwości zamieniają się osiami.
Grid place-items
Tak
Tak
Tak
Kilkoro dzieci układa się w wierszach, każde wyśrodkowane we własnym wierszu, więc rozjeżdżają się w pionie zamiast być razem. Owiń je jednym elementem.
margin: auto
Tak
Nie
Nie
W normalnym przepływie blokowym wyśrodkowuje tylko w poziomie i tylko wtedy, gdy dziecko ma szerokość mniejszą niż rodzic. W rodzicu flex lub grid margin: auto wyśrodkowuje w obu osiach.
Absolute + transform
Tak
Tak
Tak
Dziecko opuszcza przepływ, więc rodzic przestaje rosnąć wokół niego. Przesunięcia o pół piksela mogą rozmywać tekst, a transform sprawia, że dziecko staje się blokiem zawierającym i kontekstem nakładania.
Absolute inset + margin auto
Tak
Tak
Tak
Dziecko potrzebuje jawnego rozmiaru w wyśrodkowywanej osi. Bez niego inset: 0 po prostu rozciąga dziecko na cały rodzic. W obecnych przeglądarkach działają też szerokości fit-content.
text-align: center
Tak
Nie
Nie
Przesuwa tylko treść inline: tekst, obrazy, pola inline-block. Zwykły blokowy div go ignoruje, a tekst wewnątrz dziecka również dziedziczy wyśrodkowanie.
Nie
Tak
Tak
Psuje się, gdy tylko tekst zawinie się do drugiego wiersza, a wysokość trzeba wpisać na sztywno dwa razy. Nadaje się do jednowierszowej plakietki lub przycisku, do niczego więcej.
Gotowe przepisy do skopiowania
Karta na środku ekranu
Na prawdziwej stronie użyj min-height: 100dvh na kontenerze. Ramka tutaj ma stałą wysokość, żeby się zmieściła.
Przycisk odtwarzania nad miniaturą
inset: 0 z margin: auto wyśrodkowuje dziecko o stałym rozmiarze bez transform, więc krawędzie pozostają ostre.
Jeden element na środku, pozostałe przy krawędziach
Automatyczne marginesy na dziecku flexa zajmują całe wolne miejsce, więc logo siedzi na środku paska, a menu i koszyk zostają po bokach.
Wyśrodkowanie w pionie wymaga, by rodzic był wyższy niż dziecko. Przy flex-direction: column obie właściwości zamieniają się osiami.
Kilkoro dzieci układa się w wierszach, każde wyśrodkowane we własnym wierszu, więc rozjeżdżają się w pionie zamiast być razem. Owiń je jednym elementem.
W normalnym przepływie blokowym wyśrodkowuje tylko w poziomie i tylko wtedy, gdy dziecko ma szerokość mniejszą niż rodzic. W rodzicu flex lub grid margin: auto wyśrodkowuje w obu osiach.
Dziecko opuszcza przepływ, więc rodzic przestaje rosnąć wokół niego. Przesunięcia o pół piksela mogą rozmywać tekst, a transform sprawia, że dziecko staje się blokiem zawierającym i kontekstem nakładania.
Dziecko potrzebuje jawnego rozmiaru w wyśrodkowywanej osi. Bez niego inset: 0 po prostu rozciąga dziecko na cały rodzic. W obecnych przeglądarkach działają też szerokości fit-content.
Przesuwa tylko treść inline: tekst, obrazy, pola inline-block. Zwykły blokowy div go ignoruje, a tekst wewnątrz dziecka również dziedziczy wyśrodkowanie.
Psuje się, gdy tylko tekst zawinie się do drugiego wiersza, a wysokość trzeba wpisać na sztywno dwa razy. Nadaje się do jednowierszowej plakietki lub przycisku, do niczego więcej.
Wypróbuj każdą metodę wyśrodkowania
Oś
Wyśrodkuj
Metoda
Rodzic (przerywana linia) i dziecko (niebieskie)
Pudełko dziecka
Ta metoda nie obsługuje tej osi. Pudełko pokazuje, gdzie ląduje bez niej.