Uniwersalne wyśrodkowanie elementu

Czasem gdy potrzebujemy wyśrodkować element (szczególnie gdy zmienne są szerokość i wysokość parenta) normalne metody pozycjonowania elementu zawodzą. Poniżej przedstawiam najbardziej uniwersalną metodę, dzialajacą rownież na urządzeniach mobilnych:

Przykladowa struktura HTML:

<div class="parent">    <div class="toBeCentered"></div></div>

Chcemy diva .toBeCentered ustawić pośrodku elementu .parent zarówno w pionie jak i w poziomie.

Parentowi nadajemy pozycje 'relative', natomiast childowi pozycje 'absolute' i ustawiamy go w pozycji srodkowej za pomoca top i left:

.parent {    position: relative;}.parent > .toBeCentered {    position: absolute;    top: 50%;    left: 50%;}

Na pierwszy rzut oka wyglada dobrze - niestety to poczatek (lewy-gorny) róg elementu jest ustawiony w polowie. Musimy zatem przesunac childa o polowe jego szerokosci w lewo oraz o polowe jego wysokosci do gory, tak zeby to srodek elementu byl w pozycji top 50% left 50%:

.parent > .toBeCentered {    transform: translateX(50%);    transform: translateY(-50%);}


Podobnie ma sie sytuacja jesli chcemy jakis div ustawic w srodku calego ekranu, np. HTML wygląda tak:

<body>    <h1 class="onTheCenterOfScreen"></h1></body>


Wtedy szerokość i wysokość body ustawiamy na pelny ekran, a z naglówkiem postępujemy podobnie jak we wcześniejszym przykladzie:

body {   width:  100vw;   height: 100vh; }body > .onTheCenterOfScreen {    position: fixed;    top: 50%;    left: 50%;    transform: translateX(50%);    transform: translateY(-50%);}


Mam nadzieję, że ulatwi to Wam tworzenie stron internetowych na urządzenia mobilne.