みなさん、こんにちは。どんぶラッコです。今日は、画面の上下左右中央に要素を表示させたい場合のHTML/CSSの書き方を見ていこうと思います
グランくん
…どういうこと？
どんぶラッコ
百聞は一見に如かず。↓のようなものを作ろうとしているよ！よく新規会員登録の画面で見かけるんじゃないかな
左右寄せ、上下中央寄せはそれぞれできるけど、画面全体に対して上下中央よせを指定する方法は迷う方も多いと思います。
ということで、早速ポイントをお伝えした後、サンプルコードを解説していきたいと思います！
ポイント: body に height を指定する
いろいろな実現方法がありますが、今回は一番手っ取り早い body要素に高さを指定してあげる方法で上下左右寄せを実現していこうと思います。
ポイントは、body 要素に対して height:100% を指定してあげることです。もし何も指定しなかった場合、heightは body 要素の中にある各要素の高さ合計分しか表示されません。
body要素に height:100% を付与してあげることで、画面いっぱいに要素を広げてくれていることが見て取れますね。
さあ、実際に作っていきましょう！
サンプルプログラム(デモ)
See the Pen カードの上下左右中央表示サンプル by cha1ra (@cha1ra) on CodePen.
サンプルプログラムのコード
<div class="card-div">
<div class="card">
<h2>サンプルカード</h2>
<p>カードを上下左右中央寄せで表示することができるサンプルです</p>
<div class="right-text">
<div class="button">了解</div>
</div>
</div>
</div>body {
width: 100%;
height: 100%;
background-color: #eee;
}
.card-div {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items:center;
}
.card {
background-color: #fff;
max-width: 300px;
padding: 16px;
border-radius: 8px;
}
.button {
padding: 4px 12px;
border-radius: 8px;
display: inline-block;
background-color: #003366;
color: white;
}
.right-text {
text-align: right;
}CSSを見ていきましょう。先ほども伝えたように body 要素に高さを指定していますね。
その後、その中の .card-div クラスを作成して、そちらに対しても 幅、高さを 100% で指定しています。 bodyクラスが高さ100%分広がってくれているので、その直下の .card-divクラスも画面いっぱいに広がってくれます。
その下地を作った上でで flex で上下左右寄せを実現しているんですね。
flexの扱いについてはこちらの記事を参照してみてください。
このレイアウトは意外と使わなきゃいけない場面が多いので、今のうちから慣れておきましょう！
