cssの復習（中央揃え、画像の上に文字を表示、画像の透過、トリミング）

cssの記述で、

中央揃えの方法として

display:flex; justifycontent:center; aline-items:center;を利用していたが、

line-height:100px; (100pxの要素に対して真ん中の高さに位置することができる。）や

text-aline:center;を利用することも可能。

display:flex; の記述が一個少なくなるイメージ。

画像の上に文字を表示させるには、position:relative を親要素に入力し、position:absolute; を子要素につけることで画像の上に文字を配置することができるようになる。

これを利用すると親要素の左上が子要素のデフォルトの位置になるということ。

今回、画像の中に表示する文字の位置を top: calc(50%-35PX) としたことで中央より35px高い位置に設定。

背景画像は、opacity:30%;とすることで透過し、画面全体の文字を見やすくした。

画像の大きさは object-fit: cover(もしくはcontaion); で、上下、もしくは左右の余白を画面に合わせてトリミングすることが可能。