W poprzedniej wersji specyfikacji układu elastycznego pola CSS ustawiony statyczna pozycja elementów podrzędnych w pozycji bezwzględnej – tak jakby były one elementami elastycznymi o wymiarach 0 x 0 pikseli. Najnowsza wersja specyfikacji całkowicie wydobywa je z formatu i ustawia pozycję statyczną na podstawie właściwości wyrównywania i justowania. W chwili nadpisania tego tekstu oprogramowanie Edge i Opera 39 na komputery oraz Androida już obsługują tę funkcję.
Zastosujmy na przykład pewne działania pozycjonowania do poniższego kodu HTML.
<div class="container">
<div>
<p>In Chrome 52 and later, the green box should be centered vertically and horizontally in the red box.</p>
</div>
</div>
Dodamy coś takiego:
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container > * {
position: absolute;
}
W Chrome 52 i nowszych wersjach zagnieżdżony element <div> będzie idealnie wyśrodkowany w kontenerze <div>.
W przeglądarkach, które nie spełniają wymagań, lewy górny róg zielonego pola będzie znajdować się na środku u góry czerwonego pola.
Jeśli chcesz wypróbować tę funkcję w Chrome lub w dowolnej innej przeglądarce, pobierz nasz przykład lub odwiedź prezentację na żywo.