CSSにおける垂直方向のセンタリング

CSSはまだ私たちのほとんどを混乱させている。CSSには何百もの貧弱な名前のプロパティがあり、それぞれが直感的でない方法で結果に影響を与える可能性がある。 ウェブ開発における要素の垂直配置は厄介で、過去にはしばしば頭痛の種だったが、ありがたいことにその時代は終わった。


信じがたいことだが、2024年現在、CSS1行で望みの結果を得ることが可能になっている。:

0f1273b25d9806459716

0f1273b25d9806459716

以前は、同じ結果を得るために他のさまざまなオプションが使われていた。:

フレックスボックス

0f1273b25d9806459716

絶対位置決め

0f1273b25d9806459716

インラインブロック

0f1273b25d9806459716

について align-contentのブラウザサポート 特に、このタスクにフレックスボックスは必要なくなりましたし、子要素を(上の例とは異なり)別の div 何十年もかけて進歩してきたのに、CSSには垂直方向のセンタリングをコントロールする機能が1つしかないのは驚きだ。

バック