CSSで中央寄せする方法と上下の中央寄せの使い方とサンプルコード

はじめに
●CSSで要素を中央寄せする方法
- ○displayプロパティを使った方法
- ○flexboxを使った方法
●上下の中央寄せの使い方
- ○displayプロパティを使った方法
- ○flexboxを使った方法
●応用例
●応用例2
まとめ

はじめに

Webデザインにおいて、要素を中央寄せにすることは非常に重要です。

しかし、CSSで中央寄せをする方法が初心者にとっては難しいと感じることがあるかもしれません。

本記事では、CSSで中央寄せする方法や、上下の中央寄せの使い方を詳しく解説し、初心者でも分かりやすいサンプルコードを紹介します。

●CSSで要素を中央寄せする方法

要素を中央寄せする方法は、displayプロパティを用いた方法と、flexboxを使った方法があります。まずは、displayプロパティを使った方法を紹介します。

○displayプロパティを使った方法

下記のHTMLコードを例に、要素を中央寄せにする方法を解説します。

<div class="parent">
  <div class="child">Hello, World!</div>
</div>

上記のコードでは、親要素に.parentクラスを、子要素に.childクラスを付与しています。

これをCSSで中央寄せにするには、次のようなスタイルを指定します。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* 要素のスタイル */
}

親要素にはdisplay: flex;、justify-content: center;、align-items: center;を指定します。

これにより、子要素が親要素の中央に表示されます。

子要素のスタイルは、通常通り指定してください。

○flexboxを使った方法

次に、flexboxを使った方法を紹介します。flexboxは、要素をレスポンシブに配置するための仕組みで、要素を中央寄せするためにも利用されます。

下記のHTMLコードを例に、要素を中央寄せにする方法を解説します。

<div class="parent">
  <div class="child">Hello, World!</div>
</div>

上記のコードでは、親要素に.parentクラスを、子要素に.childクラスを付与しています。

これをCSSで中央寄せにするには、次のようなスタイルを指定します。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* 要素のスタイル */
}

displayプロパティの値をflexにすることで、子要素が親要素の幅いっぱいに表示されます。

justify-contentプロパティとalign-itemsプロパティをcenterに指定することで、子要素が親要素の中央に配置されます。

●上下の中央寄せの使い方

次に、上下の中央寄せの使い方を紹介します。

上下の中央寄せには、displayプロパティを使った方法と、flexboxを使った方法があります。

○displayプロパティを使った方法

下記のHTMLコードを例に、要素を上下中央寄せにする方法を解説します。

<div class="parent">
  <div class="child">Hello, World!</div>
</div>

上記のコードでは、親要素に.parentクラスを、子要素に.childクラスを付与しています。

これをCSSで上下中央寄せにするには、次のようなスタイルを指定します。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.child {
  /* 要素のスタイル */
}

親要素にheight: 100vh;を指定することで、親要素の高さを100%に指定しています。

そして、displayプロパティ、justify-contentプロパティ、align-itemsプロパティを使って子要素を中央寄せにしています。

○flexboxを使った方法

次に、flexboxを使った方法を紹介します。

下記のHTMLコードを例に、要素を上下中央寄せにする方法を解説します。

<div class="parent">
  <div class="child">Hello, World!</div>
</div>

上記のコードでは、親要素に.parentクラスを、子要素に.childクラスを付与しています。

これをCSSで上下中央寄せにするには、以下のようなスタイルを指定します。

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}

.child {
  /* 要素のスタイル */
}

flex-directionプロパティの値をcolumnにすることで、子要素を縦方向に並べます。

justify-contentプロパティをcenterに指定することで、子要素が親要素の中央に配置されます。

●応用例

ここまでで、要素を横方向・縦方向に中央寄せする方法を紹介してきました。

最後に、これらの方法を組み合わせて、実際に応用例を見てみましょう。

横方向・縦方向に中央寄せされた要素を持つサンプルコードを紹介します。

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border: 1px solid black;
      position: relative;
    }

    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="centered">This element is horizontally and vertically centered.</div>
  </div>
</body>
</html>

このように、flexboxを使うことで、簡単に要素を中央寄せすることができます。

●応用例2

上下中央寄せの応用例として、メニューバーの中央配置があります。

通常、メニューバーは横方向に並べることが多いですが、縦方向に並べる場合でも、中央寄せすることで見栄えが良くなります。

縦方向に並べたメニューバーを上下中央寄せするサンプルコードを紹介します。

<div class="menu-container">
  <ul class="menu-list">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">About</a></li>
    <li class="menu-item"><a href="#">Services</a></li>
    <li class="menu-item"><a href="#">Contact</a></li>
  </ul>
</div>

.menu-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.menu-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu-item {
  margin: 10px 0;
}

まず、親要素の.menu-containerに対して、display: flex;、justify-content: center;、align-items: center;を指定して、縦横に中央寄せします。

次に、子要素の.menu-listに対して、display: flex;、flex-direction: column;、justify-content: center;、align-items: center;を指定して、縦方向に中央寄せします。

.menu-itemには余白を設定して、メニュー項目の間にスペースを設けます。