Jak wyśrodkować element w kontenerze – 3 sposoby: Flexbox, Grid i Block


7 stycznia 2021 / Michał Kortas


Po świąteczno-noworocznej przerwie pora rozruszać stawy palcach. Dzisiejszym tematem będzie centrowanie elementu znajdującego się w kontenerze. Rzecz prosta, lecz często poszukiwana w wyszukiwarkach, szczególnie przez początkujących web-developerów. O tym, jak wyśrodkować element za pomocą trzech sposobów – Flexbox, Grid i Block – przeczytasz poniżej.

Załóżmy, że znaleźliśmy się w sytuacji, w której posiadamy kontener o klasie .container, z dodatkowym, wewnętrznym elementem, o klasie .inner. Aby zauważyć zmiany warto dodać do tego układu odrobinę CSSa.

Całość prezentuje się następująco.

Element niewyśrodkowany

Jak wyśrodkować div za pomocą „Flexboxa”?

Pierwszym przykładem będzie użycie właściwości Flexboxa. Uważam to za najprostszy i najszybszy sposób centrowania elementu znajdującego się w innym kontenerze.

Do klasy .container wystarczy dodać następujące parametry:

Jak wyśrodkować div za pomocą „Grid”?

Inną możliwością jest użycie display: grid. Tutaj jednak trzeba już style zastosować do rodzica, jak i elementu podrzędnego.

Jak wyśrodkować div za pomocą „Block”, czyli wyświetlania blokowego?

Jest to najstarszy ze sposobów, ale wciąż aktualny. Przy nim jednak trzeba najwięcej się nakombinować.

Rezultat

Każdy z omówionych powyżej przypadków doprowadzi do osiągnięcia zamierzonego celu. Element wewnętrzny znalazł się na samym środku.

Element wyśrodkowany


Tagi:


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *