Bardzo szybki CSS – centrowanie elementu div

To już klasyka i podstawy podstaw, które powinniśmy zapamiętać (niezależnie czy używamy Bootstrapa, czy flexboxa albo grida – te podstawy trzeba znać) – centrowanie elementu div w pionie i poziomie aby znajdował się idealnie w centrum ekranu.

Oto nasz kwadrat w markupie HTML:

<div class="square"></div>

Tym, aby zamienić ten element na kwadrat zajmuje się nasz CSS, nadając mu wysokość, szerokość oraz kolor:

.square {
  background-color: teal;
  width: 200px;
  height: 200px;
}

Aby wypozycjonować go idealnie w środku ekranu potrzebujemy odpowiedniego position:

.square {
  background-color: teal;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
}

Po sprawdzeniu tego kodu dojdziemy do wniosku, że coś nie działa – pytanie tylko co dokładnie. Gdybyśmy tak zmierzyli idealnie linijką, to zobaczymy, że w istocie nasz element zaczyna się idealnie w środku ekranu. Nam jednak chodziło o to, aby znajdował się (to jest miał swój środek) idealnie w środku ekranu, nie zaczynał się.

Możemy to osiągnąć dopisując jedną linijkę kodu CSS, którą warto zapamiętać:

.square {
  background-color: teal;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
 transform: translate(-50%, -50%);
}

A co, jeżeli chcemy wycentrować tylko w poziomie? Wtedy z pomocą przyjdzie nam translateX:

.square {
  background-color: teal;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

Analogicznie, jeżeli chcemy wycentrować tylko w pionie, użyjemy translateY:

.square {
  background-color: teal;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}