Jak wyśrodkować element na stronie, czyli sposoby na centrowanie w CSS

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ą, że 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ę, że najprostsze rozwiązania są najlepsze, więc od nich zacznę. Mamy obecnie do dyspozycji 2 właściwości css – flex i grid, Dzięki nim możemy z łatwością wyśrodkować każdy element. W pionie, w poziomie, a nawet w obu osiach jednocześnie. Na tym ich zalety się nie kończą. Są to całkiem rozbudowane właściwości, ale o tym pogadamy sobie w innym wpisie.

Flexbox – justify-centent, align-items

Jak wyśrodkować element na stronie za pomocą 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 właściwości place-content pozwala na jeszcze łatwiejsze wycentrowanie elementu. Pamiętaj tylko o tym, żeby dodać do rodzica właściwość 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, że natkniesz się na nie podczas pracy. Nie musisz z nich korzystać, ale warto wiedzieć, że 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” za pomocą left na osi X (w prawo) i top na osi Y (w dół). Przesunięcie spowoduje, że 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 właściwość 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ć właściwość 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ć właściwość 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śli 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ż za pomocą margin: 0 auto. Pamiętaj tylko, że to rozwiązanie zadziała jedynie dla elementów blokowych. Ustawienie auto sprawia, że 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śli nadasz mu w stylach CSS właściwość 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 właściwoś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 właściwość align-items i uwaga niespodzianka – działają one w ten sam sposób! 🙂 Nadanie właściwoś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 za pomocą 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 każdego 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śli znasz jakiś inny sposób na to jak wyśrodkować element na stronie koniecznie podziel się nim w komentarzu! 🙂