Mamy czasy HTML5 i CSS3, a problem centrowania elementów na stronach wciąż wydaje się być często poruszanym na forach i trudnym do rozwiązania. Nie jest jednak takim w praktyce. CSS pozwala na wyśrodkowywanie elementów na wszelkie sposoby choć trzeba wiedzieć, który sposób wybrać w różnych okolicznościach. Inne metody stosuje się bowiem do centrowania w pionie, a inne w poziomie, a jeszcze inne, gdy trzeba wyśrodkować w obydwu kierunkach. A zatem do rzeczy!

Najpierw odpowiedz sobie na pytanie, czy element chcesz wyśrodkować w pionie czy w poziomie. Następnie zajrzyj do poniższej ściągawki.

Jak wyśrodkować element w poziomie?

Tekst i elementy typu inline

W pierwszej chwili za pewne każdemu przychodzi do głowy metoda z własnością CSS text-align: center. Faktycznie, może ona służyć do centrowania elementów w poziomie, ale niestety nie wszystkich. Zatem których? Tylko tych, które są elementami typu „inline” czyli znajdującymi się wewnątrz innych bloków. Elementy typu inline to inline, inline-block, inline-table, inline-flex. Typ elementu określa się za pomocą własności display. Dobre wyjaśnienie tych kwestii można znaleźć w kursie CSS w dziale dotyczącym wyświetlania. Zatem można samodzielnie nadać blokom typ lub też po prostu stosować text-align: center od razu, gdyż niektóre składowe stron, są blokami inline od razu, np. tekst.

Aby wycentrować element typu inline można użyć selektora klasy w postaci:


.center {
  text-align: center;
}

a następnie w kodzie HTML przypisać tę klasę do elementu, który chce się wycentrować. Można też styl zapisać bezpośrednio w elemencie:


<!-- metoda z klasą -->
<p class="center">Wyśrodkuj ten tekst za pomocą klasy</p>

<!-- metoda z bezpośrednim stylem -->
<p style="text-align: center">Wyśrodkuj ten tekst za pomocą klasy</p>

Elementy blokowe

Element blokowy, to rodzaj pojemnika na inne elementy. Przykładem może być znacznik div. Wypełnia on całą szerokość ekranu, zatem nie da się go wyśrodkować, a tylko jego zawartość typu inline. Istnieje jednak metoda, aby wycentrować również elementy blokowe. W tym celu należy ustalić ich szerokość na mniejszą niż szerokość ekranu, a następnie zdefiniować automatyczny margines poziomy.


.center-block {
  width: 50%;
  margin: 0 auto;
}

Po zdefiniowaniu powyższej klasy w swoim arkuszu CSS, można następnie tworzyć elementy wyśrodkowane o szerokości 50% widocznego obszaru ekranu za pomocą kodu:


<!-- metoda z klasą -->
<div class="center-block">
  <p>Ten tekst oraz cała zawartość div będzie 
     wyśrodkowana w poziomie, a element będzie miał 
     szerokość 50% ekranu. 
  </p>
</div>

<!-- metoda z bezpośrednim stylem -->
<div style="width: 50%; margin: 0 auto;">
  <p>
     Ten tekst oraz cała zawartość div będzie 
     wyśrodkowana w poziomie, a element będzie miał 
     szerokość 50% ekranu. 
  </p>

Jak wyśrodkować element w pionie?

Ta metoda wydaje się trudniejsza, bo zazwyczaj przy pierwszych próbach żadne intuicyjnie wybierane metody nie działają. Środkowanie w pionie wymaga pewnych tricków, ale w praktyce można osiągnąć dowolne efekty. Teraz zdradzimy tę magię 😉

Tekst i elementy typu inline

W przypadku elementów inline trzeba rozróżnić pozycjonowanie treści jednoliniowych i wieloliniowych. Najprostszym sposobem jest zastosowanie własności padding o tej samej wartości dla górnych i dolnych odstępów elementu od krawędzi zawierającego go bloku.

.vcenter {
  padding-top: 30px;
  padding-bottom: 30px;
}

Jeśli ta metoda się nie sprawdza, można użyć kolejnej, ale tylko w sytuacji, gdy mamy pewność, że tekst nie będzie łamany do kolejnego wiersza. Trick polega na zastosowaniu tej samej wysokości linii tekstu, co wysokość zawierającego tekst elementu:

.vcenter-shortsingleline {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

W przypadku tekstu wieloliniowego również można zastosować powyższy trick, ale jeśli z jakiegoś powodu nie działa, można spróbować wykorzystać tzw. tabele CSS, czyli za pomocą CSS stworzyć tabelkę, której zawartość można już łatwo wyśrodkować. Oto stosowny przykład:

Pajączek.pl - twórz poprawiaj publikuj
.center-table {
  display: table;
  height: 250px;
  width: 240px;
}
.center-table p {
  display: table-cell;
  padding: 20px;
  vertical-align: middle;
}

i odpowiadający mu kod HTML

<div class="center-table">
  <p>
     Ten tekst oraz cała zawartość div będzie 
     wyśrodkowana w pionie za pomocą tabeli CSS.
  </p>
</div>

Za wyśrodkowanie w pionie w tym wypadku odpowiada własność vertical-align.

Jeśli jednak to rozwiązanie z tabelą css nie jest pożądane, można zastosować tzw. flexbox. Pojedynczy element inline znajdujący się w elemencie zawierającym typu flex może być w miarę prosto wycentrowany. Oto przykład, który wszystko wyjaśni:

.flex-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}
<div class="flex-center">
  <p>
     Ten tekst oraz cała zawartość div będzie 
     wyśrodkowana w pionie za pomocą elementów flex.
  </p>
</div>

Należy jednak pamiętać, że ten trick będzie działał tylko w sytuacji, gdy element zawierający (rodzic) będzie miał ustaloną wysokość height w px, %, itp.

Jeśli więc nie możesz z niego skorzystać, to pozostaje kolejne rozwiązanie tzw. ghost element. W tym wypadku pseudo-element o pełnej wysokości jest dodawany do elementu zawierającego (nadrzędnego), a tekst jest centrowany w pionie w stosunku do tego właśnie elementu „ducha”.

<div class="ghost-center">
  <p>
     Ten tekst oraz cała zawartość div będzie 
     wyśrodkowana w pionie za pomocą elementów tricku.
  </p>
</div>
div {
  width: 240px;
  height: 200px;
  margin: 20px;
  resize: vertical;
  overflow: auto;
  border: 1px solid #f00;
}
.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 20px; 
}

Elementy blokowe

W przypadku elementów blokowych (np. div) sprawa wygląda inaczej. Jeśli znasz wysokość tego elementu (jest ustalona na stałe), a zdarza się to jednak dość rzadko ze względu na technikę budowania stron (szerokość strony się zmienia, a za nią szerokość bloku, itp), możesz wówczas zastosować poniższą metodę:

.parent {
  position: relative;
}
.parent div {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px;
}
<div class="parent">
  <div>
     Element blokowy o stałej wysokości, wycentrowany w pionie
     wewnątrz elementu nadrzędnego.
  </div>  
</div>

Jeśli jednak wysokość elementu nie jest znana (w powyższym wypadku było to 100px), to nadal możemy spróbować wypozycjonować element na środku strony w pionie za pomocą poniższego tricku:

.parent {
  position: relative;
}
.parent div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
<div class="parent">
  <div>
     Element blokowy o nieznanej wysokości, wycentrowany w pionie
     wewnątrz elementu nadrzędnego.
  </div>  
</div>

I na koniec metoda z elementem flexbox. Ta metoda jest najprostsza w realizacji:

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="parent">
  <div>
     Element blokowy o nieznanej wysokości, wycentrowany w pionie
     wewnątrz elementu nadrzędnego za pomocą trich z blokiem "flex".
  </div>  
</div>

Co jeszcze można dodać w kwestii centrowania?

W sumie to już niewiele, bo powyższe przypadki pozwalają poradzić sobie z większością sytuacji. Jeśli jednak ktoś spotkał się z problemem, którego nie udało mu się rozwiązać za pomocą powyższych metod, może zajrzeć na stronę 24 metod centrowania elementów za pomocą CSS. Jest to co prawda strona po hiszpańsku, ale jest mnóstwo przykładów kodu oraz obrazki, więc nie powinno być trudności ze zrozumieniem no i zawsze pozostaje też Google Translate 😉

Powyższy artykuł został opracowany na podstawie artykułu Chrisa Coyier’a w serwisie CSS-tricks. Zachęcamy do wizyty na tej stronie, bo jest pełna ciekawych przykładów.