要素とは、開始タグから終了タグまでの全体
ブロック要素の性質
・高さと幅を指定できる
・paddingやmarginを使って余白を作ることができる
・見えていなくても、要素は幅いっぱいに広がる
display: flex;を使う方法
display: flex;は、要素に指定することで、そのすぐ下にある要素が並列になるという働きがあります
本来なら複数の要素を並べるために使いますが、親要素に下記のコードを書き加えることで、上下左右の中央寄せにすることができます。
style.css
.footer {
height: 50px;
background-color: #FAFAFA;
display: flex;
align-items: center;
justify-content: center;
}
.footer p {
font-family: serif;
}
aplication.html.erb
<footer>
<div class="footer">
<p>最高の人生</p>
</div>
</footer>