タイトルが長くなったが、レスポンシブのサイトを画像メインで作る場合によく使うレイアウトで、幅、高さを親要素に対する割合で決めて、さらにその中に伸縮する画像を中央に配置したい場合のやりかた。
.background に対してバックグラウンドイメージを指定すると、背景画像を使ったボタンに、画像のテキストを中央揃え、といったことが可能になる。
See the Pen used display: flex center by nakanishi (@nakanishi) on CodePen.
ちなみに以下のようなレイアウトにしてもflexは思った通りにはならない。何故なら子要素としてボタン用とテキスト用の画像があるため、この２つを並べようとしてしまうため。absolute のほうだけを真ん中に、みたいな気持ちはあるが、ならない。
<div display:flex, justify-content:center, align-items: center/>
<img/ ボタンの画像>
<img/ ボタンのテキスト absolute>
</div>