CSSで要素を上下中央揃えにする方法【3行でOK！】

今回は「3行のCSSで要素を上下中央揃えにする方法」を紹介します。

CSSで上下中央揃えにする方法は他にもいくつかありますが、今回紹介する方法が一番簡単です。

是非CSSコーディングの参考にしてください。

CSSで要素を上下中央揃えにする方法【3行でOK！】

以下が完成形です。

しっかり上下中央揃えになっていますね。

では、早速HTML・CSSの順番でコードを見ていきましょう。

HTML

HTMLコードはこちら。

<div class="container">
  <div class="box"></div>
</div>

containerクラスを含んだ親のdivを用意。

そして、その中にboxクラスを含んだ空のdivを入れます。

CSS

CSSコードはこちら。

body {
    text-align: center;
    margin-top: 200px;
}

.container {
  border: 2px solid #1b0303;
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  background-color: blue;
  width: 300px;
  height: 200px;
}

◎1行目〜4行目

bodyタグを中央寄せにして、marginを上につけました。

これは単純に真ん中に寄せて要素の見栄えをよくするためのスタイルです。

◎6行目〜16行目

親要素であるcontainerに対して、線をborderで囲います。

そして、widthとheightと縦横の幅を指定。

「margin: 0 auto;」で親要素を中央寄せに。

そして、以下の3行のCSSコードが上下中央揃えにするポイントです。

これらを親要素であるcontainerに対して指定することで、子要素であるboxが上下中央揃えになるのです。

◎ 18行目〜22行目

子要素であるboxに対して背景色をつけ、縦横の幅を指定しました。

まとめ

以上が、「3行のCSSで要素を上下中央揃えにする方法」でした。

実務でも頻繁に使う手法なので、是非理解しておきましょう。

関連記事:

【有益】大学生におすすめの本まとめ20選【2020年最新版】 【Swiper】サムネイル付き画像スライダーの作り方 【ブログ運営報告】大学生がブログを1ヶ月続けた結果【PV数】 【ワクワク！】すごいWEBサイトまとめ16選【2020年版】