chevron-left chevron-right

[CSS] Jak wyśrodkować elementy w pionie i poziomie?

Często, tworząc strony internetowe, spotykamy się z problemem wyśrodkowania elementów w wybranym kontenerze. O lie wyśrodkowywanie elementów w poziomie jest relatywnie proste, to o tyle wyśrodkowywanie elementów w pionie potrafi przysporzyć sporo problemów.
Zamierzam przedstawić kilka użytecznych sposobów na wyśrodkowywanie elementów za pomocą CSS.

Wyśrodkowywanie elementów o stałych wymiarach

Znając dokładne wymiary elementu, który zamierzamy wyśrodkować zarówno w pionie jak i w poziomie, bardzo ułatwia nam sprawę. Dzięki tej wiedzy możemy wykorzystać następujące reguły:

1
2
3
4
5
6
7
8
9
10
11
.container {
  position: relative;
}
.centered-element {
  width: 400px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -200px;
}

Jak widać, element możemy pozycjonować absolutnie względem rodzica ustawiając jego pozycję początkową na 50% wysokości oraz 50% szerokości rodzica, a następnie dodając ujemne marginesy: lewy i górny, będące połową szerokości i wysokości centrowanego elementu.

Wyśrodkowywanie elementów o płynnych wymiarach

Kolejny przykład obejmuje centrowanie elementu posiadającego płynne wymiary, określone w procentach. Podanie wymiarów w procentach sprawia, że element określa swoje wymiary względem wymiarów rodzica. Na pewno to nie ułatwia wyśrodkowywania elementu tak bardzo jak w przypadku, gdy znane są stałe wymiary.

Aby okiełznać tak płynnie określany element możemy wykorzystać poniżej przedstawione reguły:

1
2
3
4
5
6
7
8
9
10
11
12
.container {
  position: relative;
}
.centered-element {
  width: 40%;
  height: 20%;
  position: absolute;
  top: 50%;
  left: 50%;
 
  transform: translate(-50%, -50%);
}

W powyższym kodzie, całą magię wykonuje właściwość transform, którego wartością jest funkcja wyliczająca przemieszczenie elementu względem pozycji początkowej. Jej użyteczność jest bardzo duża.

A jak wygląda wsparcie przeglądarek?
Wygląda całkiem nieźle, ale standardowo dla IE8 i niżej należy zastosować pewne javascriptowe hacki, które pozwolą na korzystanie z dobrodziejstw tej metody. Najlepszym rozwiązaniem będzie wykorzystanie biblioteki Modernizr

Wyśrodkowywanie elementów o nieznanych wymiarach

Zdecydowanie najmniej przyjemnym przypadkiem, kiedy może zaistnieć potrzeba wyśrodkowania elementów względem rodzica, jest przypadek gdy nie znamy jakie wymiary będzie miał ybrany element, np. z względu na różną ilość tekstu jaka się tam pojawia w różnych sytuacjach.

W takiej sytuacji, nie obejdzie się bez wykorzystania odrobiy kodu HTML, który pozwoli nam na odpowiednią elastyczność w centrowaniu elementów.

1
2
3
4
5
<div class="container">
  <div class="centering-wrapper">
    <div class="centered-element">...</div>
  </div>
</div>

Do wykrozystania tej techniki potrzebny jest dodatkowy element, w powyższym przypadku: element o klasie centering-wrapper.

1
2
3
4
5
6
7
8
9
.centering-wrapper {
  display: table;
  width: 100%;
}
.centered-element {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Jak można zauważyć, w kodzie CSS wymuszamy zachowanie się elementu jako tabeli. To może być zaskakujące, ale przynosi oczekiwany skutek poprzez emulowanie zachowania tabeli. W tabelach, można łatwo wyśrodkowywać elementy, a tutaj wykorzystujemy tylko ich zachowanie bez potrzeby używania całej struktury kodu HTML i bez zmieniania semantyki kodu HTML.

Bardzo ważne jest to, aby centrowany element (nie mylić z jego opakowaniem - wrapper) miał wymuszone zachowanie jako komórki w tabeli, czyli dispay: table-cell, dzięki czemu właściwość vertical-align zadziała tak jak tego chcemy. Warto pamiętać, aby element centrowany nie posiadał żadnej właściwości float, bo wtedy zostanie on potraktowany jak element blokowy. Jeśli potrzebujemy mieć element ułożony do lewej czy prawej to warto stworzyć odpowiednią strukturę HTML wewnątrz elementu o klasie .centered-element.

źródło

  • Comandeer

    Z tabelkowatego wyświetlania chyba korzysta się najczęściej (bardzo ładne menu z tego wychodzą z przyciskami równych wymiarów ;)).
    Dla liniowych jest jeszcze jeden fajny sposób – ustalić line-height na wysokość rodzica. Wtedy tekst automatycznie środkuje się w pionie

  • MiGoo

    Line-height jest fajny, ale należy pamiętać, że metoda ta zadziała jedynie dla tekstu w jednej linijce. Jeśli jest ich więcej – emulujemy w CSS’ie tabelki 🙂

    A metody z właściwością transform: translate() nie znałem – wielkie dzięki! 🙂

  • Przydatne zestawienie różnych opcji w jednym miejscu:)

  • Bardzo ciekawa metoda z transform. Dzięki Piotr!

  • Dodam jeszcze tą metodę: http://codepen.io/chriscoyier/pen/gsodI którą swego czasu opisał Chris Coyier. Działa w ie8 więc jest nieco bardziej uniwersalna.

  • MiGoo

    Kolejna metoda, tym razem z użyciem margin:auto i pozycjonowania absolutnego: http://codepen.io/shshaw/full/gEiDt

    PS. Podziękowania dla Kamila Brenka, za znalezienie 😉