Pemusatan menegak dalam CSS

CSS masih mengelirukan bagi kebanyakan kita: ia mempunyai beratus-ratus sifat yang dinamakan dengan buruk, setiap satunya boleh menjejaskan keputusan dalam cara yang tidak intuitif. Kedudukan menegak elemen dalam pembangunan web adalah rumit dan sering menyebabkan sakit kepala pada masa lalu. Tetapi mujurlah hari-hari itu telah berakhir.


Sukar untuk dipercayai: Pada tahun 2024 kini boleh mencapai hasil yang diingini dengan satu baris CSS:

0f1273b25d9806459716

0f1273b25d9806459716

Pada masa lalu, orang menggunakan pelbagai pilihan lain untuk mencapai hasil yang sama:

Flexbox

0f1273b25d9806459716

Kedudukan mutlak

0f1273b25d9806459716

Blok sebaris

0f1273b25d9806459716

The Sokongan penyemak imbas untuk align-content kini sangat bagus, dan tiada lagi hujah yang baik untuk menggunakan teknik yang ketinggalan zaman. Untuk tugasan ini, anda tidak lagi memerlukan flexbox, dan elemen anak (tidak seperti dalam contoh di atas) tidak perlu berada dalam `<body>` yang berasingan. div dimasukkan. Sungguh mengagumkan bahawa selepas beberapa dekad kemajuan, CSS hanya kini mempunyai satu sifat untuk mengawal pemusatan menegak.

Belakang