Jak wyśrodkować element?

Przechodząc od razu do meritum, rozwiązanie na środkowanie elementu jest banalne 😁

<div align="center">center</div>

A teraz na poważnie 😀

Jest kilka prostych metod na środkowanie elementu, który zawarty jest w kontenerze. Elementem tym może być tekst, obrazek albo inny element (div). Przejdę do przykładów.

Wyrównanie tekstu

Załóżmy, że mamy do wyrównania przykładowy, bardzo popularny tekst:

Praesent fringilla turpis eu nisl congue porta. Ut eleifend enim sed consectetur dignissim. Cras vitae eros molestie, suscipit purus eu, posuere enim.

Lorem ipsum dolor sit amet.

Kod do środkowania elementu:

.text {
  text-align: center;
}

Powyższy kod wyrówna zawarty tekst do środka, nie ma w tym żadnej trudności, prawda?

Wyrównanie obrazka

W przypadku tekstu, nie było problemu, jednak z obrazkiem trzeba to rozwiązać nieco inaczej. W pierwszej kolejności należy zadbać o responsywność obrazka, a następnie go wyrównać względem kontenera.

.image {
  /* reposnsive */
  display: block;
  max-width: 100%;
  height: auto;

  /* centering */
  margin: 0 auto;
}

Obraz będzie utrzymany na środku kontenera oraz dopasuje się do jego wielkości.

Środkowanie elementu

W tym przypadku musimy podzielić rozwiązania, bo rozwiązań jest co najmniej cztery.

👉 display: block

Rozwiązanie blokowe polega na nadaniu właściwości blokowej elementowi i wyrównać tenże blok. Takim blokiem może być div, który będzie zawierał tekst, obraz lub kolejne bloki.

.block {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  padding: 0 2rem;
}

👉 display: flex

Najpopularniejszą metodą na środkowanie elementu jest niewątpliwie flexbox. Metoda pozwala na wyrównanie elementów zarówno w poziomie jak i w pionie.

Przygotujmy sobie prostu kontener z elementami do wyśrodkowania.

<div class="container">
    <div class="item">#1</div>
    <div class="item">#2</div>
</div>

Oczywiście powyższy kod niewiele wnosi i należy go opatrzyć odpowiednimi stylami CSS.

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  
  /* horizontal alignment */
  justify-content: center;
  /* vertical alignment */
  align-items: center;

  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  padding: 0 2rem;
}

Istotne są tu linie 7. i 9., które środkują elementy odpowiednio w poziomie i w pionie.

👉 display: grid

Podobnie sprawa ma się w przypadku używania tzw. grid’a. Skorzystamy z wcześniejszego HTML’a, jednak nadamy mu style w układzie grid.

.container {
  display: grid;
  gap: 1rem;
  
  /* centering */
  justify-items: center;
  grid-template-columns: 1fr 1fr;

  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  padding: 2rem;
}

👉 position: absolute

Kolejnym sposobem na środkowanie elementu jest jest pozycjonowanie absolutne, względem kontenera. Należy tu zaznaczyć, że nadrzędny kontener musi być opatrzony stylem position: relative, inaczej nasz element wyrówna się względem początku strony.

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 300px;
  height: 100px;
  border: 1px solid;
}
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Podsumowanie

Podsumowując, środkowanie elementu jest czynnością prostą, jednak czasem można napotkać pewne trudności lub ograniczenia. Rozwiązania, które przedstawiłem powinny rozwiązać (chyba) wszystkie przypadki.