13 sposobów na pionowe centrowanie

w dawnych dobrych czasach granice CSS były takie, że nawet „proste” rzeczy, takie jak pionowe centrowanie, stanowiły wyzwanie, a niektórzy z nas nawet polegali na rozwiązaniach JavaScript. Był kruchy, bardzo ograniczony, i zawsze był ten jeden wyjątek, który sprawiał, że zawodził.

niezależnie od tego, czy staraliśmy się wyrównać ikonę lub obraz obok tekstu, stworzyć jeden z tych popularnych banerów „bohaterów”, czy nakładkę modalną, centrowanie rzeczy w osi pionowej zawsze było walką.

ale CSS przeszedł długą drogę od tego czasu, dostarczając wiele metod, które ułatwiały centrowanie pionowe za każdym razem. Oto podsumowanie niektórych z nich, wraz z ich przypadkami użycia i ograniczeniami.

Pozycjonowanie absolutne i auto margin

element bez wewnętrznej wielkości może być „wyśrodkowany” po prostu używając równych wartości od góry i od dołu. Gdy element ma wewnętrzne wymiary, możemy użyć 0 dla góry i dołu, a następnie zastosować margin auto. Spowoduje to automatyczne wyśrodkowanie elementu:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

Zobacz pióro
Centrowanie 1: absolute positioning by Facundo Corradini (@facundocorradini)
on CodePen.

ograniczenie polega oczywiście na tym, że Wysokość elementu musi być wyraźnie zadeklarowana, w przeciwnym razie zajmie on cały kontener.

klasyczny top 50% translate -50%

jest to jeden z pierwszych, i nadal go-to, dla wielu programistów. Prosty trik polegający na bezwzględnym ustawieniu elementu wewnętrznego w 50% od góry rodzica, a następnie przełożeniu go na 50% jego wysokości:

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

Patrz pióro
Centrowanie 2: top 50 translateY -50 by Facundo Corradini (@facundocorradini)
on CodePen.

dość solidne podejście, z jedynym poważnym ograniczeniem jest użycie translate, które może przeszkadzać innym transformacjom, np. przy stosowaniu przejść / animacji.

tabele. Tak, właśnie powiedziałem stoliki.

bardzo proste podejście i jeden z pierwszych (kiedyś wszystko było tabele), jest za pomocą zachowania komórek tabeli i pionowe wyrównanie do środka elementu na kontenerze.

można to zrobić z rzeczywistymi tabelami (wstyd, wstyd, wstyd) lub za pomocą semantycznego HTML, przełączając wyświetlanie elementu na komórkę tabeli:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Zobacz pióro
Centering 3: tables by Facundo Corradini (@facundocorradini)
on CodePen.

działa to nawet wtedy, gdy oba elementy są nieznanej wysokości. Głównym ograniczeniem jest oczywiście, jeśli musisz mieć niecentryczne rodzeństwo, a limity tła mogą być trudne.

Pamiętaj również, że to całkowicie zawodzi na czytnikach ekranu (nawet jeśli Twoje znaczniki są oparte na div-ach, ustawienie wyświetlania CSS na table I table-cell sprawi, że czytelnicy ekranu zinterpretują ją jako rzeczywistą tabelę). Daleko od najlepszych, jeśli chodzi o dostępność.

metoda elementu ghost

inny oldie, który nie dogonił z jakiegokolwiek powodu, używa inline-block z elementem ghost (pseudo), który ma 100% wysokości rodzica, a następnie ustawia właściwość vertical-align na middle:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Patrz pióro
Centrowanie 4: ghost element method By Facundo Corradini (@facundocorradini)
on CodePen.

to działa całkiem dobrze, z najbardziej zauważalnym „gotcha” jest to, że przesuwa poziomym środkiem tylko trochę w prawo, ze względu na zawsze chrupkie zachowanie białych spacji między elementami inline-block.

można to rozwiązać tak, jak w przypadku inline-block w dowolnym innym kontekście, najprostszym podejściem jest margin-left-1ch, którego użyłem powyżej (chociaż nie będzie to w 100% dokładne, z wyjątkiem czcionek maszynowych, ponieważ jednostka ch oznacza szerokość znaku „0”), lub ustawienie rozmiaru czcionki na 0 Na kontenerze, a następnie zresetowanie jej do px lub rem na elemencie. Niezbyt optymalne.

Margin auto na elemencie flex

wreszcie wkraczając na obszar współczesnego CSS, flexbox wprowadził całkiem niesamowite zachowanie dla automatycznych marginesów. Teraz nie tylko wyśrodkuje element w poziomie, jak to miało miejsce w układach bloków, ale także wyśrodkuje go w osi pionowej:

.container{ display:flex;}.element{ margin:auto;}

Zobacz pióro
Centering 5: margin:auto on A flex-item by Facundo Corradini (@facundocorradini)
on CodePen.

ta taktyka jest jedną z moich ulubionych ze względu na swoją prostotę, jedynym głównym ograniczeniem jest to, że będzie działać tylko z jednym elementem.

Pseudoelementy na flex-containerze

nie jest to najbardziej praktyczne podejście na świecie, ale możemy również użyć elastycznych, pustych pseudoelementów, aby wypchnąć element do środka:

.container{ display:flex;}.element{ margin:auto;}

Zobacz pióro
Centrowanie 6: pseudo na flexboxie autorstwa Facundo Corradiniego (@facundocorradini)
na codepen.

może to być przydatne, gdy chcemy zachować elastyczny odstęp na zorientowanym na kolumnę Flex-containerze z wieloma elementami.

7 & 8. Wyrównaj na flex-container lub Flex-item

Flexbox wprowadził również naprawdę świetne właściwości wyrównywania (które są teraz rozwidlane w ich własnym module wyrównywania pudełek). Pozwala nam to kontrolować, jak elementy są umieszczane i jak pusta przestrzeń jest rozprowadzana w sposób, który wymagałby magicznych liczb w CSS dla określonej liczby elementów (lub całkiem sprytnego JS dla dynamicznych kwot).

w zależności od kierunku flexu, możemy użyć justify-content lub align-items, aby dostosować je w razie potrzeby.

na kontenerze:

.container{ display: flex; justify-content: center; align-items: center;}

Zobacz pióro
Centrowanie 7: wyrównaj na flex-container przez Facundo Corradini (@facundocorradini)
Na CodePen.

na konkretnym flex-item:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

Zobacz pióro
Centrowanie 8: wyrównaj na flex-item przez Facundo Corradini (@facundocorradini)
Na CodePen.

nie ma wielu wad tego, z wyjątkiem sytuacji, gdy musisz obsługiwać starsze przeglądarki. IE 11 powinien działać, ale jego implementacja flexbox jest dość błędna, dlatego zawsze należy traktować ją z szczególną ostrożnością. IE 10 wymaga dodatkowej pracy, ponieważ jest oparty na starszej, wczesnej wersji specyfikacji, która ma inną składnię i wymaga prefiksu-ms vendor.

9 & 10. Wyrównaj na grid-container lub grid-item

CSS Grid zawiera prawie takie same opcje wyrównania jak flexbox, więc możemy go użyć na grid-container:

.container{ display: grid; align-items: center; justify-content: center;}

Zobacz pióro
Centrowanie 9: wyrównaj na grid-container przez Facundo Corradini (@facundocorradini)
na codepen.

lub po prostu na określonej pozycji siatki:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

Brak obsługi starszych przeglądarek jest jedynym ograniczeniem dla tej techniki.

Zobacz pióro
Centrowanie 10: align on grid-item by Facundo Corradini (@facundocorradini)
on CodePen.

Pseudoelementy w siatce

podobnie do alternatywy flexbox, możemy użyć trójrzędowej siatki z pseudoelementami:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

pamiętaj, że 1fr oznacza minmax(auto, 1FR), więc puste wiersze niekoniecznie będą zajmowały jedną trzecią wysokości kontenera. Będą one zwijać się w razie potrzeby aż do ich minimalnej wartości auto, a bez zawartości oznacza 0.

Zobacz pióro
Centrowanie 11 : grid + pseudos by Facundo Corradini (@facundocorradini)
na CodePen.

To może wyglądać na głupie podejście, ale pozwala nam łatwo wykonać jedną z moich ulubionych sztuczek siatki CSS: łączenie wierszy fr z wierszami minmax, co spowoduje, że puste wiersze fr najpierw się zapadną, a następnie mixmax. Jenn Simmons ma na ten temat świetne przykłady.

tak więc, posiadanie pseudo-w pełni składanych wierszy pozwoli algorytmowi automatycznego umieszczania zadziałać swoją magią na naszych rzeczywistych elementach. Chyba, że musimy wspierać IE, który nie ma automatycznego umieszczania. Co prowadzi nas do następnej metody…

jawne umieszczanie wierszy siatki

CSS grid pozwala na jawne umieszczanie elementów w określonym wierszu, więc wystarczy ta sama deklaracja siatki jak powyżej i element umieszczony w drugim wierszu:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

ta może pracować w dół do IE10. Wierzcie lub nie, IE był jednym z pierwszych i silniejszych zwolenników CSS grid, wysyłając go do 2011 z IE10. Jest on oparty na bardzo wczesnym projekcie, który ma zupełnie inną składnię, ale możemy to zrobić:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

Zobacz pióro
Centrowanie 12 : jawne umieszczenie na siatce przez Facundo Corradini (@facundocorradini)
na CodePen.

Margin auto na elemencie siatki

podobnie jak flexbox, zastosowanie margin-auto na elemencie siatki Wyśrodkowuje go na obu osiach.

.container{ display: grid;}.element{ margin: auto;}

Zobacz pióro
Centrowanie 12 : wyraźne umieszczenie na siatce przez Facundo Corradini (@facundocorradini)
Na CodePen.

niektóre (prawdopodobne) przyszłe implementacje

zgodnie ze specyfikacją modułu CSS Box Alignment level 3, align-content powinien działać na osi blokowej kontenerów blokowych i kontenerów multicol, więc (jeśli przeglądarki go zaimplementują) powinniśmy być w stanie wyśrodkować zawartość tych kontenerów tak jak robimy to w kontenerach flex lub grid.

podsumowanie