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:


4 odpowiedzi na “Jak wyśrodkować element w kontenerze – 3 sposoby: Flexbox, Grid i Block”

  1. SpeX pisze:

    W grid musi być forma „.container > .inner” czy wystarczy samo „.inner”

    • Display-grid należy ustawić dla elementu nadrzędnego.

      • SpeX pisze:

        Chodzi mi, czy taki zapis będzie prawidłowy:

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

      • Tak, selektor to kwestia wtórna. W podanym przez Ciebie przypadku po prostu każdy .inner będzie otrzymywał te parametry CSS, a nie tylko ten, umieszczony w .container.

        Nie zadziała gdy rodzic .inner nie będzie miał ustawionego grida;

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.