Polski frontend

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! 🙂

Artykuł Jak wyśrodkować element na stronie, czyli sposoby na centrowanie w CSS pochodzi z serwisu Frontowisko.