CSS、2024年についに「縦方向中央揃え」が追加

 (build-your-own.org)
35 ポイント 投稿者 xguru 2024-09-03 | 29件のコメント | WhatsAppで共有
  • CSS はついにデフォルトレイアウトに align-content を追加し、たった 1 行の CSS プロパティで垂直中央揃えが可能になった
    • 対応バージョン: Chrome 123、Firefox 125、Safari 17.4
  • 現在までは基本レイアウト（flow）で align-content が動作しないため、flexbox や grid に切り替える必要があった
    • 2024 年、ついにブラウザが Flow レイアウトに align-content を実装した
    • これで flexbox や grid なしでも、CSS プロパティ 1 つだけで配置できる
    • そのため、コンテンツを div で包む必要がない

垂直中央揃えの歴史

  • ブラウザにおける垂直中央揃えには、長い間シンプルな方法がなかった

方法 1: table-cell

  • Sanity（正気か？）: ★★★☆☆
  • flow（デフォルト）、table、flexbox、grid という 4 つの主要レイアウトがあり、コンテンツの配置はレイアウトによって異なる
  • flexbox と grid が後から追加されたため、当初は table が使われていた
<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>

方法 2: absolute 位置指定

  • Sanity: ☆☆☆☆☆
  • flow レイアウトでは解決できないため、absolute 位置指定で回避する
<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>

方法 3: インラインコンテンツ

  • Sanity: ☆☆☆☆☆
  • flow レイアウトはコンテンツの配置には役立たないが、1 行内での垂直配置は許可する
  • では、コンテナの高さぶんの行を作ればどうだろう？
<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}
  • いろいろおかしくなりがち

方法 4: 1 行 flexbox

  • Sanity: ★★★☆☆
  • Flexbox が広く使われるようになったのは、Web が始まってから 20 年以上たってからだった
  • 1 行モード（デフォルト）では行が縦方向の空間を埋め、align-items で行内の項目を揃える
<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>
  • または、行を縦方向にして justify-content で項目を配置する
<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>

方法 5: 複数行 flexbox

  • Sanity: ★★★☆☆
  • 複数行の flexbox では align-content で行を配置できる
<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>

方法 6: grid コンテンツ

  • Sanity: ★★★★☆
  • grid はさらに後から登場したため、配置は少し簡単になった
<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>

方法 7: grid セル

  • Sanity: ★★★★☆
  • align-content はセルをコンテナ内に配置し、align-items はコンテンツをセル内に配置する
<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>

方法 8: auto マージン

  • Sanity: ★★★☆☆
  • flow レイアウトでは margin:auto は水平方向には中央揃えになるが、垂直方向にはならない
  • flexbox と grid にはこの不合理さがない
<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>

方法 9: 2024 年のこの記事

  • Sanity: ★★★★★
  • そもそもブラウザが最初から追加しておくべきだった
<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>

関連記事

29件のコメント

 
tobesimple7 2024-10-17

おお〜こんな機能が〜〜
 
seunggi 2024-09-12

コンピュータサイエンスで最も難しいこと ― 中央揃え

https://tonsky.me/blog/centering/
 
mongsilsushi 2024-09-06

ついに！
 
sgwanlee 2024-09-04

CSS、簡単すぎるようになったんじゃない？ｗｗｗｗ
 
jwh926 2024-09-04

🙏🏻🙏🏻🙏🏻🙏🏻
 
rulerwithcss 2024-09-04

なんてこった、チーズクラスト
 
shpkc 2024-09-04

ついに！
 
halfenif 2024-09-04

遅いってば！ 遅いってば！ 遅いってば！
 
uoayop 2024-09-03

ついに
 
aer0700 2024-09-03

うれしい
 
koyokr 2024-09-03

笑
 
nemorize 2024-09-03

a-men
 
carnoxen 2024-09-03

この変更によって、既存のウェブサイトのレイアウト構造が崩れてしまう危険はありますか？
 
bluekai17 2024-09-10

私もこの部分が気になりますね
 
ng0301 2024-09-03

ついに！
 
yatmak 2024-09-03

ついに Web 3.0 の時代が来たんですね
 
plaaat0102 2024-09-03

コメント欄が楽しさであふれてますね、ははは……
 
godppun 2024-09-03

ついに本当に……
 
kangkung9225 2024-09-03

お…？ やるべきなのかな 笑..
 
2024-09-03
[このコメントは非表示になっています。]
 
qurare 2024-09-03

ついに
 
savvykang 2024-09-03

わー!!!
 
joyfui 2024-09-03

わー!!!
 
mkyoon 2024-09-03

最高です！
 
wedding 2024-09-03

私は主にアプリ開発をしているので、Web開発を手伝うときも何も考えずに検索で出てきたflexboxを使って、これが中央揃えなんだろうと思っていたのですが……今まで存在しなかったものだったんですね。衝撃です……
 
illiil1lii 2024-09-03

やったー！
 
huiya 2024-09-03

ついに！
 
tjddnjsjo 2024-09-03

楽しい！
 
pkj3186 2024-09-03

ついに！