Środkowanie w CSS

Poznaj 5 technik centrowania i zobacz, jak przechodzą serię testów, aby sprawdzić, która z nich jest najbardziej odporna na zmiany.

Adam Argyle

Wyśrodkowywanie w CSS to znany problem, który jest często przedmiotem żartów i drwin. 2020 CSS jest już dojrzały i możemy się śmiać z tych żartów szczerze, a nie przez zaciśnięte zęby.

Jeśli wolisz obejrzeć film, tutaj znajdziesz wersję tego posta na YouTube:

Wyzwanie

Istnieją różne rodzaje wyśrodkowania. Różne przypadki użycia, liczba elementów do wyśrodkowania itd. Aby zademonstrować uzasadnienie „zwycięskiej” techniki centrowania, stworzyłem Resilience Ringer. To seria testów warunków skrajnych dla każdej strategii centrowania, które pozwalają zachować równowagę i obserwować ich skuteczność. Na koniec ujawniam technikę, która uzyskała najwyższy wynik, oraz tę, która jest „najbardziej wartościowa”. Mamy nadzieję, że dzięki temu poznasz nowe techniki i rozwiązania, które pomogą Ci się skoncentrować.

Irytujące cyberpsy

Resilience Ringer odzwierciedla moje przekonanie, że strategia centrowania powinna być odporna na układy międzynarodowe, różne rozmiary widocznego obszaru, edycje tekstu i treści dynamiczne. Te zasady pomogły ukształtować następujące testy odporności, które techniki centrowania muszą przejść:

  1. Ściśnięty: wyśrodkowanie powinno uwzględniać zmiany szerokości
  2. Squashed: centering should be able to handle changes to height
  3. Duplicate: centering should be dynamic to number of items
  4. Edytuj: wyśrodkowanie powinno być dynamiczne i dostosowywać się do długości i języka treści
  5. Flow: wyśrodkowanie powinno być niezależne od kierunku dokumentu i trybu pisania

Zwycięskie rozwiązanie powinno wykazywać się odpornością, utrzymując zawartość w centrum podczas ściskania, zgniatania, duplikowania, edytowania i przełączania na różne tryby językowe i kierunki. Godne zaufania i odporne centrum, bezpieczne centrum.

Legend

Dodałem kilka wskazówek kolorystycznych, które pomogą Ci zachować niektóre metainformacje w kontekście:

  • Różowa ramka oznacza własność stylów wyśrodkowania
  • Szare pole to tło kontenera, w którym elementy mają być wyśrodkowane.
  • Każdy element podrzędny ma białe tło, dzięki czemu możesz zobaczyć, jak technika wyśrodkowania wpływa na rozmiary pól podrzędnych (jeśli w ogóle).

5 uczestników

Na ringu odporności psychicznej zmierzy się 5 technik koncentracji, ale tylko jedna z nich zdobędzie koronę odporności psychicznej 👸.

1. Centrum treści

Edytowanie i duplikowanie treści za pomocą VisBug
  1. Squish: Świetnie!
  2. Squash: świetnie.
  3. Duplikat: świetnie!
  4. Edytuj: świetnie.
  5. Flow: świetnie!

Trudno będzie pobić zwięzłość display: grid i skrót place-content. Ponieważ wyśrodkowuje i wyrównuje elementy podrzędne zbiorczo, jest to dobra technika wyśrodkowywania grup elementów, które mają być czytane.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}
Zalety
  • Treści są wyśrodkowane nawet w przypadku ograniczonej przestrzeni i przepełnienia
  • Edytowanie i konserwacja są scentralizowane w jednym miejscu.
  • Odstęp gwarantuje równe odstępy między n elementami podrzędnymi.
  • Siatka domyślnie tworzy wiersze
Wady
  • Najszerszy element podrzędny (max-content) określa szerokość wszystkich pozostałych. Więcej informacji na ten temat znajdziesz w sekcji Gentle Flex.

Świetnie nadaje się do układów makr zawierających akapity i nagłówki, prototypów lub ogólnie elementów, które wymagają czytelnego wyśrodkowania.

2. Gentle Flex

  1. Squish: Świetnie!
  2. Squash: świetnie!
  3. Duplikat: świetnie!
  4. Edytuj: świetnie!
  5. Flow: Świetnie!

Gentle Flex to strategia, która wyłącznie wyśrodkowuje. Jest miękka i delikatna, ponieważ w przeciwieństwie do place-content: center podczas centrowania nie zmienia się rozmiar żadnego z pól podrzędnych. Wszystkie elementy są ułożone, wyśrodkowane i rozmieszczone w jak najbardziej delikatny sposób.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}
Zalety
  • Obsługuje tylko wyrównanie, kierunek i rozmieszczenie
  • Edytowanie i konserwacja w jednym miejscu
  • Odstęp gwarantuje równe odstępy między n elementami podrzędnymi.
Wady
  • Najwięcej wierszy kodu

Świetnie sprawdza się zarówno w przypadku układów makro, jak i mikro.

3. Autobot

  1. Ścisk: świetny
  2. Squash: świetny
  3. Duplikat: grzywna
  4. Edytuj: świetnie
  5. Flow: świetnie

Kontener jest ustawiony na flex bez stylów wyrównania, a bezpośrednie elementy podrzędne są stylizowane z automatycznymi marginesami. Jest coś nostalgicznego i wspaniałego w tym, że margin: auto działa na wszystkich stronach elementu.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}
Zalety
  • Fajna sztuczka
  • Szybko i byle jak
Wady
  • Nieprawidłowe wyniki w przypadku przepełnienia
  • Poleganie na rozmieszczeniu zamiast na odstępach oznacza, że układy mogą występować z elementami podrzędnymi dotykającymi boków
  • „Wpychanie” na pozycję nie wydaje się optymalne i może spowodować zmianę rozmiaru pola elementu podrzędnego.

Świetnie sprawdza się w przypadku wyśrodkowywania ikon lub pseudoelementów.

4. Fluffy Center

  1. Ścisk: zły
  2. Squash: bad
  3. Duplikat: nieprawidłowy
  4. Edytuj: świetnie!
  5. Flow: Świetnie! (o ile używasz właściwości logicznych).

Uczestnik „puszysty środek” jest zdecydowanie najsmaczniej brzmiącym kandydatem i jedyną techniką centrowania, która jest całkowicie zależna od elementu lub elementu podrzędnego. Widzisz naszą pojedynczą wewnętrzną różową ramkę?

.fluffy-center {
  padding: 10ch;
}
Zalety
  • Ochrona treści
  • Atom
  • Każdy test zawiera tę strategię centrowania.
  • Odstęp między słowami to odstęp
Wady
  • Złudzenie, że nie jest przydatny
  • Występuje konflikt między kontenerem a elementami, ponieważ każdy z nich ma bardzo sztywne rozmiary.

Świetnie nadaje się do wyśrodkowywania słów lub wyrażeń, tagów, pigułek, przycisków, elementów i innych.

5. Pop i Plop

  1. Ścisk: OK
  2. Squash: OK
  3. Duplikat: nieprawidłowy
  4. Edytuj: grzywna
  5. Przepływ: prawidłowy

Ten element „wyskakuje”, ponieważ pozycjonowanie bezwzględne powoduje, że element wyskakuje z normalnego przepływu. Część nazwy „plop” pochodzi od sytuacji, w której jest najbardziej przydatny: gdy kładę go na innych rzeczach. To klasyczna i przydatna technika centrowania nakładki, która jest elastyczna i dynamiczna w zależności od rozmiaru treści. Czasami trzeba po prostu umieścić jeden interfejs na drugim.

Zalety
  • Przydatne
  • Wiarygodne
  • Gdy jest potrzebna, jest nieoceniona
Wady
  • Kod z ujemnymi wartościami procentowymi
  • Wymaga position: relative, aby wymusić blok zawierający
  • Przedwczesne i niezręczne podziały wierszy
  • W każdym bloku zawierającym może być tylko 1 taki element bez dodatkowych działań.

Świetnie nadaje się do okien modalnych, wyskakujących powiadomień i wiadomości, stosów i efektów głębi oraz wyskakujących okienek.

Zwycięzca

Gdybym był na wyspie i mógł mieć tylko 1 technikę wyśrodkowywania, byłaby to…

[drum roll]

Gentle Flex 🎉

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Zawsze znajdziesz go w moich arkuszach stylów, ponieważ jest przydatny zarówno w makro-, jak i mikroukładach. To niezawodne rozwiązanie, które daje wyniki zgodne z moimi oczekiwaniami. Poza tym, ponieważ jestem fanem rozmiaru wewnętrznego, zwykle wybieram to rozwiązanie. To prawda, że trzeba dużo pisać, ale korzyści przewyższają dodatkowy kod.

Najbardziej wartościowy zawodnik

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center jest tak mały, że łatwo go przeoczyć jako technikę centrowania, ale jest to podstawa moich strategii centrowania. Jest tak atomowa, że czasem zapominam, że jej używam.

Podsumowanie

Jakie rzeczy zakłócają Twoje strategie koncentracji? Jakie inne wyzwania można dodać do dzwonka odporności? Rozważałem translację i przełącznik automatycznej wysokości w kontenerze… Co jeszcze?

Teraz, gdy już wiesz, jak ja to zrobiłem, jak Ty byś to zrobił? Zróżnicujmy nasze podejście i poznajmy wszystkie sposoby tworzenia w internecie. Wykonaj ćwiczenie z tego posta, aby utworzyć własny przykład wyśrodkowania, taki jak w tym poście. Wyślij mi tweeta ze swoją wersją, a dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności