Nasza strona używa cookies. Korzystając ze strony, wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki. Rozumiem

To jak w końcu wycentrować div? A no tak!

Rozwikłajmy memy i wspólnie przejdźmy przez metody centrowania div!
To jak w końcu wycentrować div? A no tak!

Jeśli miałbym wskazać jeden mem, który zawsze mnie śmieszy, to będzie to ten o centrowaniu div. Jednak trochę zajęło mi dojście do momentu, w którym mogłem zacząć się z niego faktycznie śmiać. Zdarzało się, że musiałem bez końca wertować fora programistyczne i spędzać godziny na próbowaniu różnych rozwiązań pod tym kątem.


Dokonałem wyboru. Postanowiłem poznać tajniki centrowania CSS. Zasłużyłem sobie na prawo do śmiechu. Albo przynajmniej na trochę chichotania. A dzisiaj Ty też sobie na to zapracujesz.

Nauczysz się 3 metod centrowania, a po każdej z nich, pokażę Ci inny mem. Jeśli proces uczenia zadziała, każdy obrazek powinien rozśmieszać Cię bardziej niż poprzedni.

Zanim pokażę Ci pierwszą metodę, poznajmy kod HTML, który zgłosił się na ochotnika do udziału w tym pokazie.

<div class="container">
  <div class="content">I am centered~</div>
</div>


Teraz gdy znamy już część HTML, przejdźmy do pierwszej metody.


Centrowanie za pomocą position: absolute

Bywały czasy, kiedy nikt nie dbał o responsywność. I ten sposób myślenia był bardzo uzasadniony. Istniał tylko jeden rodzaj monitora. Wyglądało to mniej więcej tak.

W tym czasie można było ustawić pozycję na absolute dla każdego elementu. Nie trzeba było się martwić o podejście mobile-first. Właściwie to na początku nie było żadnego mobile.

Każdy element był absolutnie pozycjonowany. Metoda centrowania musiała to uwzględniać. Na szczęście dla nas, można to osiągnąć za pomocą zaledwie kilku linii kodu w CSS.

.container {
  position: relative;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


Nie jest źle, ale 10 linii kodu to chyba zbyt wiele jak na tak proste zadanie. Zobaczymy, czy uda nam się je zredukować, ale najpierw musimy zadbać o jedną rzecz.

Teraz gdy mamy już za sobą pierwszą metodę, czas sprawdzić, czy Twoje poczucie humoru zaczyna się rozwijać.

Nie spodziewam się, że w tym momencie zalejesz się łzami, ale jeśli na Twojej twarzy pojawił się choć mały uśmieszek, to zmierzamy we właściwym kierunku. A ten kierunek to nasza druga metoda.


Centrowanie przy użyciu Flexbox

Wraz z wprowadzeniem flexboxa strach i łzy zniknęły z twarzy programistów. Flexbox szybko znalazł miejsce w ich serduszkach. Wielu z nich zaczęło go używać (w tym również i ja).

Dzisiaj używam flexboxa do wszystkiego. I tak, zgadłeś, używam go również do centrowania.

Możesz wycentrować element, używając Flexbox, za pomocą tych 5 linii kodu.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}


Uważam, że jest to duże ulepszenie w porównaniu z pierwszą metodą. Jednak stać nas na więcej. Możemy napisać jeszcze mniej kodu i osiągnąć te same rezultaty. Jeśli chcesz zobaczyć, jak... czytaj dalej!

Jednak teraz czas na szybki przegląd i spojrzenie na kolejny mem. Kiedy już się uspokoisz i skończysz się śmiać, przyjrzymy się następnej metodzie.


Centrowanie przy użyciu Grid

Jest rok 2021, więc można użyć CSS grid lub flexbox, aby uzyskać dowolny układ. CSS grid różni się nieco od flexboxa, ponieważ używa dwóch wymiarów do pozycjonowania elementów. Składa się on z wierszy i kolumn, w przeciwieństwie do flexboxa, który umieszcza elementy obok siebie.

No dobrze. Żeby wskazać różnicę między nimi, zazwyczaj mówię po prostu, że grid jest bardziej złożony i powinien być używany do bardziej skomplikowanych układów. Można go jednak użyć również do wycentrowania elementu. Moim zdaniem jest to najszybszy sposób, aby to osiągnąć.

.container {
  display: grid;
  place-items: center;
}


No i proszę, właśnie nauczyłeś się centrować element za pomocą dwóch właściwości CSS. Uwielbiam tę metodę z dwóch prostych powodów:

  • 2 linie kodu są łatwe do napisania
  • 2 linie kodu są trudne do zapomnienia


Gratulacje, właśnie odkryłeś jedyną metodę, która rządzi nimi wszystkimi. W tym momencie jesteś już w zasadzie mistrzem CSS-a i zasłużyłeś/aś sobie na prawo do dużej dawki śmiechu podczas oglądania memów.

Aby sprawdzić, czy wszystko poszło zgodnie z oczekiwaniami, nadszedł czas na ostatni żart. Albo ostateczny test, jeśli wolisz.

Umieram z ciekawości, jaka była Twoja reakcja. Jeśli masz jeszcze kilka sekund, daj mi znać w komentarzach.


Podsumowanie

Jak to bywa z wieloma rzeczami w życiu, istnieją różne sposoby na osiągnięcie tego samego rezultatu. Jest to szczególnie prawdziwe, gdy chodzi o CSS. A Twoim zadaniem jest znać najszybszy sposób wykonania danej rzeczy.

Dzisiaj nauczyłeś się prawdopodobnie najbardziej przerażającego zadania w CSS. I mam nadzieję, że przy okazji dobrze się bawiłeś i że mój wybór memów przypadł Ci do gustu. Jeśli masz jeszcze jakieś ulubione, nie krępuj się i podziel się nimi w komentarzach.



Oryginał tekstu w języku angielskim przeczytasz tutaj.

1 komentarz

Lubisz dzielić się wiedzą i chcesz zostać autorem?

Podziel się wiedzą z 160 tysiącami naszych czytelników

Dowiedz się więcej