シュウ

今回は【CSS】要素を中央配置についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• Flexboxや、Gridを学べます！複数の要素を並べつつ、中央に配置したい場合
• 今回はCSS初心者の方でも簡単に実践できる、代表的な中央配置のテクニックをいくつかご紹介します！

要素を中央配置について

Webサイトを作っていると、「この画像を真ん中に置きたい！」「ボタンを画面のど真ん中に表示したい！」と思うこと、ありますよね。
CSSで要素を天地中央（水平方向と垂直方向の両方）に配置するのは、一見難しそうですが、いくつかの便利な方法があります

今回は、CSS初心者の方でも簡単に実践できる、代表的な中央配置のテクニックをいくつかご紹介します！

Flexboxを使う方法

現代のCSSで要素を配置するなら、Flexboxが一番便利です。
シンプルなのに、とても柔軟に対応できます。

<div class="container">
  <div class="inner">
    真ん中にくる要素
  </div>
</div>

.container {
  display: flex;  /* 必須 */
  justify-content: center;  /* 必須 */
  align-items: center;  /* 必須 */
  height: 100vh;
  background-color: #395848;
}

.inner {
  background-color: #d8d9ba;
  text-align: center;
}

Flexboxのjustify-contentとalign-itemsをcenterに設定するだけで、子要素が親要素の中で天地中央に配置されます。

高さはheight: 100vhと指定していますが、コンテンツに合わせて変更してください。

Gridを使う方法

Gridも、Flexboxと同じくらい強力なレイアウト方法です。
特に複雑なレイアウトを組む際に真価を発揮しますが、中央配置も非常に簡単です。

Gridを使う方法

真ん中にくる要素

<div class="container">
  <div class="inner">
    真ん中にくる要素
  </div>
</div>

.container {
  display: grid;  /* 必須 */
  place-items: center;  /* 必須 */
  height: 100vh;
  background-color: #395848;
}

.inner {
  background-color: #d8d9ba;
  text-align: center;
}

今回は画像を挿入してみましたが、問題なく天地中央に配置されました。
place-items: centerは、水平方向のjustify-items: centerと垂直方向のalign-items: centerをまとめた便利なプロパティです。
Flexboxと似ていますが、Gridの方がより二次元的なレイアウトの管理に長けています。

positionを使う方法

FlexboxやGridが使える現代では出番が減りましたが、
知っておくと役立つこともあります。

positionを使う方法

真ん中にくる要素

<div class="container">
  <div class="inner">
    真ん中にくる要素
  </div>
</div>

.container {
  position: relative;  /* 必須 */
  height: 100vh;
  background-color: #395848;
}

.inner {
  position: absolute;  /* 必須 */
  top: 50%;  /* 必須 */
  left: 50%;  /* 必須 */  
  transform: translate(-50%, -50%);   /* 必須 */
}

親要素には、position: relativeの指定を忘れずにしてください。
top: 50%とleft: 50%で要素の左上が親要素の中央に来ます。
その後、transform: translate(-50%, -50%)を使うことで、要素自身の幅と高さの半分だけ左上に戻し、
結果的に要素全体が天地中央に配置されます。

注意するポイント！
CSSでレイアウトを組む際、特にFlexboxやGridのようなモダンなレイアウトを使う場合は、基本的に子要素に固定の高さを指定しない方が、柔軟でレスポンシブなデザインを作りやすくなります。

まとめ

今回はこれで以上です。
まず Flexbox の方法を試してみることを強くおすすめします。最も現代的で汎用性が高く、多くの場面で役立つでしょう。
もし、さらに複雑なグリッド状のレイアウトを組む予定があるなら、Gridの使い方を学ぶのも良い選択です。

< 前の記事

【jQuery】datepicker CSSでカスタマイズする方法

次の記事 >

【CSS】半透明のフィルターを設置について解説