Sytuacja kobiet w IT w 2024 roku
7.08.20195 min
Stephen Sun

Stephen SunSoftware DeveloperMoblize

Jak bezbłędnie centrować elementy w CSS

Poznaj listę 5 sposobów centrowania elementów w CSS.

Jak bezbłędnie centrować elementy w CSS

Bądźmy szczerzy - na którymś etapie naszej kariery kodowania, wszyscy byliśmy sfrustrowani centrowaniem rzeczy w CSS (szukając sposobu na centrowanie div wewnątrz div w Googlu lub Stack Overflow).

Może to być jedno z najprostszych zadań do wykonania, ale może szybko stać się mylące, gdy dodajesz więcej elementów i stylów do swojej strony.

Ponieważ jest to dość powszechny problem, zebrałem listę sposobów centrowania w CSS w tym przewodniku. Do każdego przykładu, który stworzyłem w CodePen, dołączyłem również embedy i linki. Zapraszam do używania, kopiowania i dzielenia się, wedle życzenia!

Sprawdź moje CodePens tutaj.

Przejdźmy do rzeczy!

Metoda Text-Align

Metoda "text-align: center" jest chyba najczęściej spotykaną metodą centrowania. Jest ona używana głównie do centrowania tekstu na stronie HTML, ale może być również używana do centrowania divów.

Sztuczka polega na:

  1. Zamknięciu diva, którego chcesz umieścić w centrum, za pomocą elementu nadrzędnego.
  2. Ustawieniu "text-align: center" do elementu nadrzędnego.
  3. Następnie ustawieniu wewnętrznego diva na "display: inline-block".


W moim przykładzie z niebieskim kwadratem, zamykam go innym divem zwanym "blue-square-container". Aby wyśrodkować mój niebieski kwadrat, musiałem stworzyć element nadrzędny i ustawić właściwość wyświetlania mojego niebieskiego kwadratu na inline-block.

Jest tak dlatego, że domyślnie właściwość wyświetlania div jest ustawiona na blokadę, co oznacza, że będzie ona obejmować całą szerokość strony. Ustawiając właściwość wyświetlania mojego niebieskiego kwadratu na inline-block, zapewniamy, że niebieski kwadrat będzie obejmował tylko ustawioną przeze mnie szerokość, która wynosi 100px.

Dodanie wielu elementów podrzędnych do elementu nadrzędnego (w tym przykładzie niebieskie kwadraty), wyśrodkowuje wszystkie z nich.

Metoda Margin Auto

Innym powszechnym sposobem centrowania jest zastosowanie metody margin auto. Używając tej metody, nie potrzebujemy elementu nadrzędnego.

Możemy po prostu zastosować "margin: 0 auto" do naszego żółtego pudełka, o ile mamy określoną szerokość.

"margin: 0 auto" jest skrótem od ustawienia górnego i dolnego marginesu do zera, a lewego i prawego marginesu do automatycznego.

Jest to ważne, ponieważ bez zdefiniowanej przeze mnie szerokości 100px, przeglądarka nie będzie w stanie wyrenderować lewego i prawego marginesu potrzebnego do wyśrodkowania żółtego pola. Ustawiając szerokość, przeglądarka automatycznie rozdzieli odpowiednią ilość marginesu po obu stronach żółtego pola.

Część "0" może być ustawiona na dowolną liczbę pikseli dla górnego i dolnego marginesu.

Kolejną fajną sztuczką jest ustawienie albo marginesu po lewej stronie na auto, albo marginesu po prawej na auto, co pozwala nam przesunąć nasz div odpowiednio na prawą lub lewą stronę (wypróbuj to!).

Metoda bezwzględnego pozycjonowania

Bezwzględne pozycjonowanie elementu pozwala nam zasadniczo umieścić element gdziekolwiek chcemy, na stronie… z jedną wadą.

Bezwzględne pozycjonowanie usuwa element z przepływu strony.

Dlaczego to jest ważne? Ponieważ może to spowodować nakładanie się elementów w przypadku nieprawidłowego użycia.

Jeśli chcemy po prostu wyśrodkować element poziomo na stronie, tak jak to robiliśmy w pierwszych dwóch metodach, to musimy pamiętać o trzech krokach:

  1. Ustawienie właściwości położenia elementu na wartość absolutną
  2. Zastosowanie "left: 50%” do elementu.
  3. Ustawianie lewego marginesu na połowę szerokości elementu.


W tym przykładzie używamy zielonego kwadratu. Jest takiej samej wielkości jak kwadraty w innych przykładach, więc nasza szerokość nadal wynosi 100px.

Jak widzisz, podałem pozycję “absolutną" i zastosowałem "left: 50%" do naszego zielonego kwadratu. To mówi przeglądarce, aby przesunęła lewą krawędź o 50% w prawo.

Jeśli jednak odtwarzasz ten przykład, nie chcemy, aby lewa krawędź znajdowała się na środku. Chcemy, aby środek kwadratu pokrywał się ze środkiem strony.

To prowadzi nas do naszego ostatniego kroku. W celu wyrównania i przesunięcia dodatkowej przestrzeni, stosujemy lewy margines o połowie szerokości zielonego kwadratu. W naszym przypadku jest to 50px (niezależnie od szerokości elementu, zawsze będzie to połowa).


Metoda Transform/Translate

Do tej pory zajmowaliśmy się tylko centrowaniem rzeczy w poziomie, ale co jeśli chcemy umieścić coś na środku strony? Wyśrodkujmy nasz czerwony kwadrat zarówno w poziomie, jak i w pionie.

Chociaż metoda ta wykorzystuje również pozycjonowanie bezwzględne i "left: 50%", zastosowałem jeszcze dwie inne właściwości elementu.

Ustawiając górną właściwość również na 50%, mówię przeglądarce, aby wyrównała górną krawędź naszego czerwonego kwadratu ze środkiem strony w pionie. Ale podobnie jak w poprzednim przykładzie, nie chcemy, aby krawędzie były połączone z centrum. Chcemy, aby środek naszego kwadratu pasował dokładnie do górnego środka naszej strony.

W tym miejscu stosujemy nową właściwość zwaną Transform.

Jest wiele fajnych rzeczy, które możesz zrobić z Transform, takich jak tłumaczenie, obracanie i skalowanie animacji, ale dla tego przykładu, będziemy używać Translate.

Dajemy właściwości transform "transform: translate(-50%, -50%)” i voila! Nasz czerwony kwadrat jest wyśrodkowany zarówno w poziomie, jak i w pionie!

Uwielbiam tę metodę, ponieważ niezależnie od szerokości czy wysokości naszego elementu, zawsze będzie ona w centrum strony. Ten sposób jest często stosowany w projektowaniu responsywnym i nie wymaga definiowania marginesów, jak w przypadku pozycjonowania bezwzględnego.

Metoda Flexbox


Jeśli nie znasz Flexboksa, to w porządku! Flexbox to moduł układu, który zapewnia bardziej efektywny sposób wyrównywania i umieszczania elementów na stronie.

Jeśli jesteś zainteresowany nauką Flexboksa (gorąco polecam), Flexbox Froggy to świetny i zabawny sposób na naukę (nie są ze mną powiązani,  -  po prostu jest to coś, czego używałem do nauki Flexboksa)!

Cztery kroki do centrowania w poziomie i w pionie za pomocą Flexbox są następujące:

  1. HTML, body i parent container muszą mieć wysokość 100%.
  2. Wyświetlanie ustawione w pozycji "flex on parent container".
  3. Ustawienie align-items na środku parent containera.
  4. Ustawienie justify-content na środku parent containera.


Ustaw wyświetlanie na flex on the parent i zdefiniuj go jako flex container.

Ustawiając align-items na środku, mówimy, że obiekty podrzędne lub przedmioty elastyczne mają być wyśrodkowane pionowo w obrębie obiektu macierzystego.
 Justify-content działa w ten sam sposób, ale w kierunku poziomym dla naszego przykładu.

Lubię również używać tej metody, ponieważ jest zarówno responsywna, jak i nie wymaga żadnych obliczeń marginesu.

Mam nadzieję, że ten artykuł okazał Ci się pomocny. Dzięki za czytanie! :)


Oryginał tekstu w języku angielskim przeczytasz tutaj.

<p>Loading...</p>