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.