Pionowe centrowanie w CSS

CSS jest nadal mylący dla większości z nas: ma setki źle nazwanych właściwości, z których każda może wpływać na wynik w nieintuicyjny sposób. Pionowe pozycjonowanie elementów w tworzeniu stron internetowych jest trudne i często przyprawiało o ból głowy w przeszłości, ale te czasy na szczęście minęły.


Trudno w to uwierzyć: w 2024 roku możliwe jest teraz osiągnięcie pożądanego rezultatu za pomocą jednej linii CSS:

0f1273b25d9806459716

0f1273b25d9806459716

W przeszłości stosowano wiele innych opcji, aby osiągnąć ten sam rezultat:

Flexbox

0f1273b25d9806459716

Pozycjonowanie bezwzględne

0f1273b25d9806459716

Blok wbudowany

0f1273b25d9806459716

The Obsługa przeglądarki dla align-content jest teraz bardzo dobry i nie ma już argumentów za stosowaniem przestarzałych technik. Do tego zadania nie potrzebujesz już flexboxa, a element potomny (w przeciwieństwie do powyższego przykładu) nie musi znajdować się w osobnym elemencie `<body>`. div Zadziwiające jest to, że po dziesięcioleciach postępu CSS ma tylko jedną funkcję do kontrolowania pionowego centrowania.

Plecy