W tym wpisie opowiem Ci pewną historię. Historię o dziewczynie imieniem Phoebi. Phoebi była świetną programistką. Pisała czysty, zrozumiały i łatwo rozszerzalny kod. Używała odpowiednich wzorców projektowych i przemyślanej architektury. Była uwielbiana przez wszystkich w zespole. Pewnego dnia dostała zadanie, żeby wyśrodkować element w CSSie i wszystko się dla niej zmieniło…🤯
Nie jest żadną tajemnicą, iż pisanie CSSa potrafi być czasami frustrujące. Coś się nie wyświetla? A może nie wygląda tak, jak powinno? Przywitaj się z CSSem. Frontendowiec i CSS to związek pełen wzlotów i upadków, ale staramy się z tym pogodzić i wycisnąć z tej cytrynki, to co najlepsze. Dlatego w tym wpisie odpowiemy sobie na jedno z najczęstszych pytań każdego frontendowca. Czyli jak wyśrodkować element na stronie i jednocześnie nie osiwieć? 🤔
Wstępne informacje
Na początek zobrazujemy sobie nasz problem. Mamy 2 divy – zewnętrzny, który pełni rolę kontenera i wewnętrzny, który chcemy wyśrodkować. Domyślnie wygląda to tak:
See the Pen
Centering in CSS – default state by frontowisko (@frontowisko)
on CodePen.
Jak wyśrodkować element w pionie i w poziomie?
Mówi się, iż najprostsze rozwiązania są najlepsze, więc od nich zacznę. Mamy w tej chwili do dyspozycji 2 adekwatności css – flex i grid, Dzięki nim możemy z łatwością wyśrodkować każdy element. W pionie, w poziomie, a choćby w obu osiach jednocześnie. Na tym ich zalety się nie kończą. Są to całkiem rozbudowane adekwatności, ale o tym pogadamy sobie w innym wpisie.
Flexbox – justify-centent, align-items
Jak wyśrodkować element na stronie dzięki flexboxa? Ustaw dla kontenera, czyli naszego rodzica display: flex, a następnie justify-content: center (poziomie) i align-items: center (pionowo). Dzięki tym trzem linijkom otrzymasz wyśrodkowany w obu osiach element. Yeeey! 🥳
See the Pen
Vertical centering in CSS – flexbox by frontowisko (@frontowisko)
on CodePen.
Grid – place-content
Wykorzystanie adekwatności place-content pozwala na jeszcze łatwiejsze wycentrowanie elementu. Pamiętaj tylko o tym, żeby dodać do rodzica adekwatność display: grid.
See the Pen
Horizontal&vertical centering in CSS – grid method by frontowisko (@frontowisko)
on CodePen.
Ale to nie wszystko… czyli starsze metody, aby wyśrodkować element w pionie i w poziomie
Zanim powstał flexbox czy display grid musieliśmy radzić sobie innymi sposobami. Możliwe, iż natkniesz się na nie podczas pracy. Nie musisz z nich korzystać, ale warto wiedzieć, iż istnieją. Dzięki temu nie będziesz musiała potem rozkminiać co autor miał na myśli. Ewentualnie potraktuj je jako ciekawostkę. 🤓
Position i transform
W pierwszej kolejności musisz zmienić pozycjonowanie rodzica na relative, a dziecka na absolute. Dzięki temu element dziecko nie „odleci” poza swój kontener (o tym dlaczego tak w ogóle mogłoby się stać, przeczytasz w naszym wpisie o pozycjonowaniu). Kolejny krok to „przesunięcie elementu” dzięki left na osi X (w prawo) i top na osi Y (w dół). Przesunięcie spowoduje, iż początek naszego wewnętrznego diva będzie znajdował się na środku rodzica, co możesz zaobserwować na screenie poniżej.
Jednak my chcemy, żeby to był środek, a nie początek. Dlatego trzeba dodać jeszcze adekwatność transform.
See the Pen
Vertical centering in CSS – position&transform method by frontowisko (@frontowisko)
on CodePen.
Table
CSS pozwala nam sprawić, aby niektóre tagi HTML zachowywały się tak jak elementy tabeli. Wystarczy wykorzystać adekwatność display: table-cell, żeby „zamienić naszego rodzica w tabelę”. Samo centrowanie uzyskasz, dzięki text-align: center i vertical-align: middle. Aby zmiany zadziałały, element wewnętrzny musi być wyświetlany jako inline-block.
See the Pen
Horizontal&vertical centering in CSS – table method by frontowisko (@frontowisko)
on CodePen.
Jak wyśrodkować element w poziomie?
Flexbox – justify-content
Analogicznie do opisywane wcześniej rozwiązania z fleboxem nadajemy kontenerowi display: flex i nadajemy mu justify-content: center. Dzięki temu zmieniamy położenie tylko w osi X.
See the Pen
Horizontal centering in CSS – flexbox by frontowisko (@frontowisko)
on CodePen.
Grid – justify-content
Podobnie jak w przykładzie z centrowaniem w pionie i w poziomie kontener musi posiadać adekwatność display: grid. Potem wystarczy tylko dodać justify-content do wewnętrznego elementu. Dzięki temu uzyskasz wyśrodkowanie w poziomie.
See the Pen
Horizontal centering in CSS – grid method by frontowisko (@frontowisko)
on CodePen.
Position i transform
Wiesz już jak wyśrodkować element w pionie i w poziomie dzięki kombinacji position i transform. jeżeli chcesz centrować w poziomie, przesuń element tylko względem osi X.
See the Pen
Horizontal centering in CSS – position&transform method by frontowisko (@frontowisko)
on CodePen.
Text-center
Trochę inaczej niż w pozostałych przykładach, text-align: center centruje jedynie tekst w elemencie. Sam div dziecko nie zmienia swojego położenia.
See the Pen
Horizontal centering in CSS – text-center method by frontowisko (@frontowisko)
on CodePen.
Margin
Centrować możesz też dzięki margin: 0 auto. Pamiętaj tylko, iż to rozwiązanie zadziała jedynie dla elementów blokowych. Ustawienie auto sprawia, iż CSS bierze dostępną w poziomie przestrzeń między rodzicem i dzieckiem, po czym nakłada ją jako margines z obu stron po równo.
*Możesz skorzystać z tej metody dla elementu liniowego (np. zdjęcia) tylko, jeżeli nadasz mu w stylach CSS adekwatność display: block.
See the Pen
Horizontal centering in CSS – text-center method by frontowisko (@frontowisko)
on CodePen.
Jak wyśrodkować element w pionie?
Flexbox – align-items
Pewnie już wiesz, co chce powiedzieć… Tak, nadanie adekwatności display: flex i align-items: center do elementu rodzica spowoduje wyrównanie dziecka w pionie. 🙂
See the Pen
Vertical centering in CSS – flexbox by frontowisko (@frontowisko)
on CodePen.
Grid – align-content
Grid podobnie jak flebox posiada adekwatność align-items i uwaga niespodzianka – działają one w ten sam sposób! 🙂 Nadanie adekwatności align-items: center na kontenerze z ustawionym display: grid daje upragniony rezultat. Div dziecko zostaje wyśrodkowany w pionie.
See the Pen
Vertical centering in CSS – grid method by frontowisko (@frontowisko)
on CodePen.
Position i transform
Analogicznie do środkowania w pionie i w poziomie dzięki position i transform. Jedyną różnicą jest przesunięcie w jednej osi – Y.
See the Pen
Vertical centering in CSS – position&transform method by frontowisko (@frontowisko)
on CodePen.
Podsumowanie
Jak widać, sposobów na centrowanie jest cała masa i możemy w nich przebierać. Moim najczęstszym wyborem jest flexbox. Wydaje mi się dość intuicyjny i oprócz wyśrodkowania elementów pozwala na wiele innych sztuczek. Podobnie wygląda korzystanie z css grida, dlatego te 2 rozwiązania są w mojej ocenie najlepsze. Ale jak wiadomo – dla wszystkich coś dobrego, więc warto przetestować je w praktyce i samemu zdecydować. 😎
A Ty, z jakiej metody korzystasz najczęściej? A może jakiegoś rozwiązania brakuje? jeżeli znasz jakiś inny sposób na to jak wyśrodkować element na stronie koniecznie podziel się nim w komentarzu! 🙂
