1. 記事の目的
わたしはCSSが書けません。
しかし、htmlやjavascriptで作成した成果物やコンテンツを、最低限の見た目にしたいという思いはあります。
**「最低限の見た目」＝「画面サイズに依存せずに画面の中心に配置する」と考えた私は、「なら、成果物を画面の中心にもってくるCSSをいつでも使えるように用意しておこう。」**と決意しQiitaに投稿しました。それだけです。
2. コード（コピペ用）
bodyタグに対して、以下のようにCSSを設定することで、コンテンツを中心に配置できます。
body {
margin:0;
display:flex;
min-height:100vh;
justify-content:center;
align-items:center;
/* flex-direction: column; */
}
一般公開するので、一通り解説をします。
詳細は参考リンクに譲ります。
3. CSS の解説
3-1. 解説用html
解説用のhtmlサンプルは以下の通りです。今回はbodyタグの下に見た目用のCSSを追記しています。あくまで解説用のため、本来は必要ないです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
/* ここを個々に解説をします */
/* margin: 0; */
/* display: flex; */
/* justify-content: center; */
/* min-height: 100vh; */
/* align-items: center; */
/* flex-direction: column; */
}
</style>
</head>
<body>
<div class="item item1">アイテム1</div>
<div class="item item2">アイテム2</div>
<div class="item item3">アイテム3</div>
</body>
<style>
/* 枠線や背景色などの見た目用CSS */
body {
box-sizing:border-box;
border: black 10px solid;
padding: 10px;
background-color: gainsboro;
}
.item{
border: black 2px solid;
padding: 3px;
margin: 3px;
background-color: #fff;
}
</style>
</html>
こんな感じの見た目になります。（通常なら見た目用CSSがないため、もっと味気ない感じになりますよね。）
図1. 何もない状態
3-2. margin:0;
まず、marginと呼ばれる枠(border)の外の設定です。（図1の黒太枠の外の余白です。）
デフォルトではmargin:8pxとなっていました。margin:0に設定することで枠の外の余白をなくします。
※margin:0のときはpxのような単位がなくても構いません。もちろん、単位があっても動作します。
body {
margin: 0px;
/* display: flex; */
/* justify-content: center; */
/* min-height: 100vh; */
/* align-items: center; */
/* flex-direction: column; */
}
図2. margin:0 を設定
黒太枠（bodyのborder）の外側の余白(margin)がなくなりました。
3-3. display: flex;
flexコンテナと呼ばれるものを設定します。
以下のjustify-contentやalign-itemsなどを使用するために必要です。
body {
margin: 0;
display: flex;
/* justify-content: center; */
/* min-height: 100vh; */
/* align-items: center; */
/* flex-direction: column; */
}
図3. display: flexの適用
display:flexを適応するとこんな感じです。黒太枠内がflexコンテナです。
flexコンテナを適用したタグの子要素（アイテムたちのことです！）が左に寄せられています。
ブロックレベル要素（タグごとに改行される要素）のアイテムたちが横並びになっています。（図2だと縦に並んでました）
3-4. justify-content:center;
flexコンテナ内の要素を、水平方向のどの位置に配置するかを指定します。
デフォルト（指定していない場合）はjustify-content:flex-start。左寄せになります。（図3 参照）
今回はjustify-content:centerを指定して、中央にします。
body {
margin: 0px;
display: flex;
justify-content: center;
/* min-height: 100vh; */
/* align-items: center; */
/* flex-direction: column; */
}
図4. justify-content: center の適用
左に寄っていたアイテムたちが、真ん中に集合しました！
3.5. min-height:100vh;
flexコンテナの領域の最低の高さを100 vhに設定します。
vhはviewport heightと呼ばれる、viewport（表示領域）の高さに対する割合の単位です。
100vhはviewportに対して100%という意味です。
つまり**min-height:100vh＝「bodyの高さを少なくとも、表示領域と同じにする」**になります。
body {
margin: 0px;
display: flex;
justify-content: center;
min-height: 100vh;
/* align-items: center; */
/* flex-direction: column; */
}
図5. min-height: 100vh の適用
黒太枠線(bodyのborder)が画面いっぱいに広がりました。
それにともない、アイテムたちが縦にみょーんとなっています。
3-6. align-items:center;
図5でアイテムたちが縦にみょーんとなってしまっているのは、align-itemsのためです。
align-itemsはflexコンテナ内の要素を垂直方向のどの位置に配置するかを指定します。
デフォルト（指定していない場合）はalign-items:stretch が指定されている状態です。親要素の高さになります。（図5参照）
今回は、中央揃えにしたいのでalign-items:centerを指定します。
body {
margin: 0px;
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
/* flex-direction: column; */
}
図6. align-items: center の適用
3-7. （追記）flex-direction: column;
**3-3. display: flex;**でアイテムが横配置になりました。
これはflex-direction: row;がデフォルトで反映されているからです。
flex-directionはflexコンテナ内のアイテムの向きを指定するプロパティです。
flex-direction: column;とすることで、縦配置のまま画面中心にコンテンツを移動することができます。
4. さいごに
コンテンツを画面の中心に持ってくることができました！
これで最低限の見た目は保証がされるはずです！（私は信じています！）
あとはいいコンテンツを作るだけですね！…
参考リンク
-
CSS フレックスボックスレイアウト
flexboxをちゃんと理解したい場合はこちら。 -
日本語対応！CSS Flexboxのチートシートを作ったので配布します
使い方がわかりやすく参考にしています。 -
CSS には vw, vh, vmin, vmax という単位がある
vhについてはこちら。