子要素の高さを揃えてコンテンツを上下中央

複数の子要素を同じ高さに揃えつつ、各子要素内のコンテンツを上下中央に配置するテクニックです。カードレイアウトやリストでよく使います。

プレビュー

タイトル1

短いテキスト

タイトル2

こちらは少し長めのテキストが入ります。
複数行でも高さが揃います。

タイトル3

中央揃え＆高さ揃え

実装のポイント

親にdisplay: flex; 子にalign-items: stretch; 子要素内にjustify-content: center; align-items: center;でOK。min-width: 0;で折り返しも安全。