Środkowanie w CSS

Poznaj 5 technik wyrównywania, które są poddawane serii testów, aby sprawdzić, która z nich jest najbardziej odporna na zmiany.

Adam Argyle

Wyśrodkowywanie w CSS jest słynnym wyzwaniem, pełnym żartów i drwin. 2020 CSS jest już dorosłe, więc możemy się śmiać z tych żartów, a nie tylko z zaciśniętymi zębami.

Jeśli wolisz film, oto wersja tego posta w YouTube:

Wyzwanie

Istnieją różne typy wyśrodkowania. Od różnych przypadków użycia, liczby rzeczy do wyśrodkowania itp. Aby zademonstrować uzasadnienie „zwycięskiej” techniki wyśrodkowywania, stworzyłem The Resilience Ringer. To seria testów obciążeniowych dla każdej strategii wyrównywania, aby zachować równowagę i obserwować skuteczność. Na koniec ujawniam technikę, która przyniosła najwyższą liczbę punktów, a także „najcenniejszą”. Mamy nadzieję, że udało Ci się poznać nowe techniki i rozwiązania dotyczące wyśrodkowywania.

The Resilience Ringer

Strategia Resilience Ringer jest wyrazem mojego przekonania, że strategia centrowania powinna być odporna na układy międzynarodowe, zmienne rozmiary widocznego obszaru, zmiany w tekście i dynamiczną zawartość. Te zasady pomogły nam opracować testy odporności na błędy dla technik centralizacji, które mają być trwałe:

1. Squished: centering should be able to handle changes to width
2. Squashed: centering should be able to handle changes to height
3. Duplikat: wyśrodkowanie powinno być dynamiczne w stosunku do liczby elementów
4. Edytuj: wyśrodkowanie powinno być dynamiczne w zależności od długości i języka treści
5. Proces: wyśrodkowanie powinno być niezależne od kierunku i trybu pisania dokumentu.

Zwycięskie rozwiązanie powinno wykazać się odpornością na ściskanie, zgniecenie, powielenie, edycję i przestawienie na różne tryby językowe i kierunki. godne zaufania i odporne na awarie centrum, bezpieczne centrum;

Legenda

Aby ułatwić Ci zachowanie metainformacji, dodałem kolorowe wskazówki wizualne:

• Różowa obwódka wskazuje własność stylów wyrównywania do środka
• Szary kwadrat 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ć wpływ techniki wyśrodkowywania na rozmiary elementów podrzędnych (jeśli takie występują).

5 uczestników

5 technik centrowania wejdzie do Resilience Ringer, ale tylko jedna otrzyma Resilience Crown 👸.

1. Centrum treści

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

Trudno będzie pokonać zwięzłość display: grid i skrót place-content. Ponieważ wyrównuje i wyśrodkowuje elementy zbiorczo, jest to solidna technika wyśrodkowania dla grup elementów przeznaczonych do czytania.

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

Doskonale nadaje się do układów makro 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. Edit: świetnie.
5. Przepływ: świetnie.

Delikatne dostosowanie to strategia polegająca na prawdziwym wyśrodkowywaniu tylko. Jest ona łagodna i delikatna, ponieważ w przeciwieństwie do place-content: center podczas wyśrodkowywania nie zmienia się rozmiarów pudełek z zabawkami. Wszystkie elementy są ułożone w stosie, wyśrodkowane i oddalone od siebie w jak najbardziej delikatny sposób.

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

Doskonale nadają się zarówno do układów makro, jak i mikro.

3. Autobot

1. Squish: świetny
2. Squash: świetny
3. Duplikat: fine
4. Edytuj: świetnie
5. Przepływ: świetny

Kontener jest ustawiony na flex bez stylów wyrównania, a bezpośredni podrzędny ma styl z automatycznymi marginesami. Jest coś nostalgicznego i wspaniałego w tym, że margin: auto działa na wszystkich krawędziach elementu.

.autobot {
  display: flex;
}
.autobot > * {
  margin: auto;
}

Doskonale nadaje się do wyśrodkowywania ikon lub pseudoelementów.

4. Fluffy Center

1. Squish: zły
2. Squash: zły
3. Duplikat: zły
4. Edit: świetnie.
5. Przepływ: świetnie. (o ile używasz właściwości logicznych)

Uczestnik „puszyste centrum” to zdecydowanie nasza najsmaczniejsza propozycja, a jednocześnie jedyna technika centrowania, która jest całkowicie własnością elementu podrzędnego. Zobacz nasz pojedynczy wewnętrzny obrys różowy

.fluffy-center {
  padding: 10ch;
}

Doskonale nadaje się do centralnego pozycjonowania słów lub wyrażeń, tagów, elementów typu pill, przycisków, elementów typu chip i innych.

5. Pop & Plop

1. Squish: okay
2. Squash: okay
3. Duplikat: zły
4. Edytuj: fine
5. Przepływ: prawidłowy.

Element „wysuwa się”, ponieważ pozycjonowanie bezwzględne wyrzuca go poza normalny przepływ. Nazwa „plop” pochodzi od słowa „plop”, które oznacza „wrzucanie” czegoś na inne rzeczy. Jest to klasyczna i poręczna technika wyśrodkowywania nakładki, która jest elastyczna i dynamicznie dostosowuje się do rozmiaru treści. Czasami wystarczy po prostu umieścić interfejs na innym interfejsie.

Doskonale nadaje się do modali, toastów i wiadomości, stosów i efektów głębi oraz wyskakujących okienek.

Zwycięzca

Gdybym był na bezludnej wyspie i mógł wybrać tylko jedną technikę wyśrodkowywania, byłaby to…

[bęben]

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 on przydatny zarówno w przypadku makro-, jak i mikro-layoutów. To wszechstronne, niezawodne rozwiązanie, które spełnia moje oczekiwania. Poza tym jestem uzależniona od określania rozmiarów, więc często korzystam z tego rozwiązania. To prawda, że trzeba wpisać sporo znaków, ale korzyści z tego wynikające przewyższają długość kodu.

MVP

Fluffy Center

.fluffy-center {
  padding: 2ch;
}

Fluffy Center jest tak mikroskopijne, że łatwo można przeoczyć tę technikę wyśrodkowywania, ale jest ono podstawą moich strategii wyśrodkowywania. Jest tak atomowy, że czasem zapominam, że go używam.

Podsumowanie

Co może zakłócić działanie strategii wyśrodkowywania? Jakie inne wyzwania można dodać do dźwięku dzwonka odporności? Rozważałem tłumaczenie i automatyczne przełączanie wysokości kontenera… co jeszcze?

Teraz, gdy już wiesz, jak to zrobić, jak Ty to zrobisz? Zróżnicuj swoje podejścia i poznaj wszystkie sposoby tworzenia stron internetowych. Aby utworzyć własny przykład wyśrodkowania, podobny do tego w tym poście, skorzystaj z codelab. Wyślij mi tweeta ze swoją wersją, a dodam ją do sekcji Remiksy społeczności poniżej.

Remiksy społeczności

• CSS Tricks z postem na blogu