Jak wyśrodkować diva w CSS - wszystkie powszechnie stosowane metody w 2021 roku

CSS to technologia, która z uwagi na fakt, że wielu developerów ją zaniedbuje, może przysporzyć wielu problemów i wygenerować godziny spędzone na nierównej szermierce ze stylami. W tym wpisie poruszymy zagadnienie, które przyczyniło się do powstania kilku memów, mianowicie - centrowanie elementów. Temat zdawać by się mogło trywialny, jednak jak się okazuje - tylko "na papierze". Problem centrowania elementów możemy w CSS rozwiązać na kilka sposobów, zależnie od sytuacji.

Flexbox

Jest to obecnie najpowszechniej stosowana i zalecana metoda centrowania elementów.

1.parent {
2  display: flex;
3  justify-content: center; // wyśrodkowanie w poziomie
4  align-items: center;  // wyśrodkowanie w pionie
5}

By wyśrodkować element dziecka na środku okna, rodzic musi być "rozciągnięty" na całą szerokość i wysokość okna:

1.parent {
2  width: 100vw;
3  height: 100vh;
4  display: flex;
5  justify-content: center; // wyśrodkowanie w poziomie
6  align-items: center;  // wyśrodkowanie w pionie
7}

LUB

1.parent {
2  width: 100vw;
3  height: 100vh;
4  display: flex;
5}
6
7.child {
8  margin: auto;
9}

Grid

Wyśrodkować elementy możemy również za pomocą grida:

1.parent {
2  display: grid;
3  place-content: center; // wyśrodkowanie w pionie i poziomie
4}

LUB

1.parent {
2  display: grid;
3}
4
5.child {
6  margin: auto;
7}

Position

Nieco starszą, ale również powszechnie stosowaną metodą na wycentrowanie elementu w poziomie i pionie jest wykorzystanie właściwości position:

1.parent {
2  position: relative;
3}
4
5.child {
6  position: absolute;
7  top: 50%;
8  left: 50%;
9  transform: translate(-50%, -50%);
10}

W tym przypadku należy pamiętać, że elementy z position: absolute wychodzą poza flow dokumentu, co może rodzić problemy z pozycjonowaniem innych elementów znajdujących się w pobliżu.

Margin

Z uwagi na sposób obliczania wysokości elementów w dokumencie, za pomocą właściwości margin możemy jedynie wyśrodkować elementy w osi poziomej. Należy tutaj pamiętać, że pozycjonowany element musi mieć określoną właściwość width:

1.parent {
2  width: 100vw;
3}
4
5.child {
6 width: 100px;
7 margin: 0 auto; 
8}

Wyśrodkowanie treści

By wyśrodkować treść wewnątrz elementu blokowego możemy skorzystać z właściwości text-align oraz vertical-align:

1.parent {
2  text-align: center; // wyśrodkowanie w poziomie
3  vertical-align: middle; // wyśrodkowanie w pionie
4}

Jeśli zauważyłeś błąd lub nieścisłość we wpisie lub znasz inny ciekawy sposób rozwiązania tego problemu, odezwij się do mnie przez social media lub przez formularz na stronie.

Bądź ze mną w kontakcie na Twitterze lub LinkedIn, jeśli interesuje Cię świat aplikacji webowych 😉