[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.

Sekcja 1Wyś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.

Sekcja 2Wyś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

Sekcja 3Wyś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