Q. Flexboxで天地中央に配置し、ブロックの高さも揃えるには？

align-items: center;
天地中央に配置できるが、高さは揃わない。

align-items: stretch;（デフォルト値）
高さは揃うけど、天地中央に配置できない。

align-items: center; / padding: 100% 0; / overflow: hidden;
親ブロックの高さを指定すれば、天地中央に配置し、各要素の高さも揃えられる。
が、height の指定がないとこうなるので使えない。

A. 解決策なし！

Flexboxは、table / vertical-align: middle; のように、上下を伸ばしつつ中身を天地中央に配置してくれない。

W3Cはなぜそうしなかったんだー!!

というわけで table-cell、または HTMLを table にしてしまおう。
余白を作るには空タグを必要とするが、解決策がないのでしょうがない。

table-cell

table

ダミーテキスト Lorem ipsum dolor sit amet この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 ダミーテキスト