13 sposobów na pionowe wyśrodkowanie

W starych dobrych czasach, ograniczenia CSS były takie, że nawet „proste” rzeczy jak pionowe wyśrodkowanie stanowiły wyzwanie, z niektórymi z nas nawet polegającymi na rozwiązaniach JavaScript. Był kruchy, był bardzo ograniczony, i zawsze był ten jeden wyjątek, który sprawiał, że zawodził.

Czy to próbowaliśmy wyrównać ikonę lub obrazek obok tekstu, stworzyć jeden z tych popularnych banerów „bohaterów”, czy też nakładkę modalną, centrowanie rzeczy w osi pionowej zawsze było walką.

Ale CSS przeszedł długą drogę od tamtego czasu, dostarczając wiele metod, które sprawiły, że centrowanie w pionie stało się łatwiejsze za każdym razem. Oto podsumowanie niektórych z nich, wraz z ich przypadkami użycia i ograniczeniami.

Pozycjonowanie bezwzględne i margin auto

Element bez własnego rozmiaru może być „wyśrodkowany” przez użycie równych wartości z góry i z dołu. Jeśli element ma własne wymiary, możemy użyć 0 dla góry i dołu, a następnie zastosować margin auto. W ten sposób element zostanie automatycznie wyśrodkowany:

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

Poznaj pióro
Centrowanie 1: pozycjonowanie absolutne autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

Ograniczeniem jest oczywiście to, że wysokość elementu musi być jawnie zadeklarowana, w przeciwnym razie zajmie on cały kontener.

Klasyczne top 50% translate -50%

To jeden z pierwszych i wciąż go-to, dla wielu programistów. Prosta sztuczka, polegająca na absolutnym pozycjonowaniu elementu wewnętrznego na 50% od góry jego rodzica, a następnie tłumaczeniu go na 50% jego wysokości:

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

Zobacz Pióro
Centrowanie 2: top 50 translateY -50 autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

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

Tablice. Yup, właśnie powiedziałem tabele.

Naprawdę prostym podejściem i jednym z pierwszych (w tamtych czasach wszystko było tabelami), jest użycie zachowania komórek tabeli i vertical-align do wyśrodkowania elementu na kontenerze.

Można to zrobić za pomocą rzeczywistych tabel (wstyd, wstyd, wstyd), lub używając semantycznego HTML-a, przełączając wyświetlanie elementu na table-cell:

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

Zobacz pióro
Centrowanie 3: tabele autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

To działa nawet wtedy, gdy oba elementy mają nieznaną wysokość. Głównym ograniczeniem jest oczywiście konieczność posiadania nie wyśrodkowanego rodzeństwa, a to może być kłopotliwe z ograniczeniami tła.

Należy również pamiętać, że to całkowicie zawodzi na czytnikach ekranu (nawet jeśli twój znacznik jest oparty na divach, ustawienie CSS display na table i table-cell sprawi, że czytniki ekranu zinterpretują to jako rzeczywistą tabelę). Daleko od najlepszych, jeśli chodzi o dostępność.

Metoda elementu-ducha

Kolejnym starym rozwiązaniem, które z jakiegoś powodu się nie przyjęło, jest użycie inline-block z elementem-duchem (pseudo), który ma 100% wysokości rodzica, a następnie ustawienie właściwości 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;}

Zobacz pióro
Centrowanie 4: metoda ghost element by Facundo Corradini (@facundocorradini)
na CodePen.

To faktycznie działa całkiem dobrze, z najbardziej zauważalnym „gotcha” jest to, że przesuwa centrum poziome tylko trochę w prawo, z powodu zawsze cringy zachowanie białych przestrzeni między elementami inline-block.

Można sobie z tym poradzić tak jak z inline-block w każdym innym kontekście, najprostsze podejście to margin-left -1ch, którego użyłem powyżej (choć nie będzie to w 100% dokładne, chyba że na czcionkach monospace, jako że jednostka ch oznacza szerokość znaku „0”), lub ustawienie rozmiaru czcionki na 0 w kontenerze, a następnie zresetowanie go do px lub rem w elemencie. Nie jest to optymalne, by tak rzec.

Margin auto na flex-item

Wreszcie wchodząc na terytorium nowoczesnego 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 blokowych, ale także wyśrodkuje go w osi pionowej:

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

Zobacz pióro
Centrowanie 5: margin:auto na flex-item autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

Taktyka ta jest jedną z moich ulubionych ze względu na jej prostotę, jedynym poważnym ograniczeniem jest to, że będzie działać tylko z pojedynczym elementem.

Pseudoelementy na flex-container

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

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

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

To może być przydatne, gdy chcemy zachować elastyczny odstęp na kolumnie zorientowanej na flex-container z wieloma elementami.

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

Flexbox wprowadził również naprawdę świetne właściwości wyrównania (które są teraz rozwidlone do własnego modułu wyrównania pudełka). To pozwala nam kontrolować jak elementy są umieszczane i jak pusta przestrzeń jest dystrybuowana w sposób, który wymagałby albo magicznych liczb w CSS dla określonej liczby elementów (lub całkiem sprytnego JS dla dynamicznych ilości).

W zależności od kierunku flex, możemy użyć justify-content lub align-items aby dostosować się do potrzeb.

Na kontenerze:

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

Poznaj pióro
Centrowanie 7: align na flex-container autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

Na konkretny flex-item:

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

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

Niewiele minusów do tego, z wyjątkiem sytuacji, gdy musisz wspierać starsze przeglądarki. IE 11 powinien działać, ale jego implementacja flexbox jest dość zabugowana, więc zawsze należy traktować go z dodatkową ostrożnością. IE 10 wymaga dodatkowej pracy, ponieważ jest oparty na starszym, wczesnym projekcie specyfikacji, który ma inną składnię i wymaga prefiksu -ms vendor.

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

CSS Grid zawiera całkiem sporo tych samych opcji wyrównania co 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: align on grid-container autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

Albo tylko na konkretnym elemencie siatki:

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

Brak wsparcia starszych przeglądarek jest jedynym ograniczeniem dla tej techniki.

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

Pseudoelementy na siatce

Podobnie do alternatywy flexbox, możemy użyć trzyrzę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 zajmą jedną trzecią wysokości kontenera. Będą się one zapadać w miarę potrzeb aż do ich minimalnej wartości auto, a bez zawartości oznacza to 0.

Zobacz pióro
Centrowanie 11: siatka + pseudo autorstwa Facundo Corradini (@facundocorradini)
na CodePen.

Może to wyglądać jak głupie podejście, ale pozwala nam łatwo ściągnąć jedną z moich ulubionych sztuczek CSS Grid: łączenie rzędów fr z minmax, co spowoduje, że najpierw zapadną się puste fr, a potem mixmax. Jenn Simmons ma świetne przykłady na ten temat.

Więc, posiadanie pseudo wierszy w pełni zwijanych pozwoli algorytmowi auto-placement na działanie magii na naszych rzeczywistych elementach. Z wyjątkiem sytuacji, gdy musimy obsługiwać IE, w którym brakuje auto-placementu. Co prowadzi nas do następnej metody…

Wyraźne umieszczenie elementów w rzędzie siatki

Siatka CSS pozwala na jawne umieszczenie elementów w konkretnym rzędzie, więc wystarczy ta sama deklaracja siatki co powyżej i element umieszczony w drugim rzędzie:

.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 metoda może działać aż do IE10. Wierzcie lub nie, IE był jednym z pierwszych i silniejszych zwolenników siatki CSS, wysyłając ją aż w 2011 roku z IE10. Jest to oparte na naprawdę wczesnym projekcie, który ma zupełnie inną składnię, ale możemy sprawić, że będzie działać:

.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 : wyraźne umieszczanie na siatce przez Facundo Corradini (@facundocorradini)
na CodePen.

Margin auto na grid-item

Podobnie do flexbox, zastosowanie margin-auto na grid-item wyśrodkowuje go na obu osiach.

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

Poznaj pióro
Centrowanie 12 : explicit placement on a grid by Facundo Corradini (@facundocorradini)
on CodePen.

Niektóre (prawdopodobne) przyszłe implementacje

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

Wniosek

.