これだけでOK!!CSSで要素を中央寄せにする4つの方法【初心者向け】

これだけでOK!!CSSで中央寄せにする4つの方法

投稿日:

要素の種類によって方法が異なる

CSSで要素を中央にするには、対象がどんな要素なのかを把握する必要があります。
今回は4つの要素にフォーカスしていきます。
こちらの4つの方法を使うことが出来れば、実務で困ることは、そうそう無いと思います!

  • ブロック要素
  • インライン要素
  • フレックスボックス
  • ポジション

ブロック要素の中央寄せ

ブロック要素を中央寄せにするには、「margin」を使用します。

/* ブロック要素の中央寄せ */
.hoge {
  margin: 0 auto;
}

See the Pen ブロック要素の中央寄せ by カノト (@kanoto) on CodePen.

ブロック要素は、CSSの「display」プロパティの値が「block」の場合になります。
他にも、「item-list」や「table」「flex」などもブロック要素と同様に「margin」で中央寄せにすることが出来ます。

プロパティの値が「inline-XXX」「table-XXX」以外はブロック要素と同様の扱いと考えてOKです!

ブロック要素を中央寄せにする際の注意点

ブロック要素を中央寄せにする際には以下のことに注意しましょう!

  • 中央寄せにする要素のwidthが横幅いっぱいになっていないか

対象の要素の横幅が100%になっていると思うように中央にすることが出来ません。
まぁ、当然ですよね(笑)

ブロック要素は特に指定がないと、基本的に横幅100%になっています。
なので、キチンと横幅を指定してあげてくださいね!

インライン要素の中央寄せ

インライン要素を中央寄せにするには、「text-align」を使用します。

/* インライン要素の中央寄せ */
.hoge {
  text-align: center;
}

See the Pen インライン要素の中央寄せ by カノト (@kanoto) on CodePen.

インライン要素は、CSSの「display」プロパティの値が「inline」の場合になります。
他にも、「inline-block」や「inline-flex」もインライン要素と同様に「text-align」で中央寄せにすることが出来ます。

また、要素の中にあるテキストもインライン扱いになります。

インライン要素を中央寄せにする際の注意点

インライン要素を中央寄せにする際には以下のことに注意しましょう!

  • 中央にしたい要素の親要素にtext-alignを付ける
  • 子要素すべてに「text-align」が適用されてしまう

フレックスボックスの中央寄せ

フレックスボックスの子要素を中央寄せにするには、「justify-content」を使用します。

/* フレックスボックスの子要素を中央寄せ */
.hoge {
  display: flex;
  justify-content: center;
}

See the Pen フレックスボックスの中央寄せ by カノト (@kanoto) on CodePen.

フレックスボックス(display: flex)使用している場合は「justify-content: center」を使用しましょう!
ちなみに、ブロック要素と同様に「margin」でも中央寄せに出来ます。

See the Pen フレックスボックスの中央寄せ(margin) by カノト (@kanoto) on CodePen.

また、フレックスボックスの記述の1つである「flex-direction: column」を使用している場合は、「align-items: center」で中央寄せに出来ます。

/* フレックスボックスの子要素を中央寄せ(flex-wrap) */
.hoge {
  display: flex;
  align-items: center;
  flex-direction: column;
}

See the Pen フレックスボックスの中央寄せ(margin) by カノト (@kanoto) on CodePen.

大枠(display: flexを掛けている要素)を中央寄せにするには、「margin」でOKです!

ポジションの中央寄せ

ポジションの「absolute」「fixed」を適用している要素を中央寄せにするには、「left」「transform: translateX」を使用します。

/* positionの中央寄せ */
.hoge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

See the Pen フレックスボックスの中央寄せ(margin) by カノト (@kanoto) on CodePen.

仕組みとしては、「left: 50%」で対象の要素の左端を親要素の半分の位置に移動させます。

その後、「translateX(-50%)」で対象要素の横幅の半分だけ右に移動させます。

そうすることで、中央寄せにすることが出来ます。

ちなみに、「left」を「top」、「translateX()」を「translateY()」にすれば上下中央にすることも出来ます!!

Copyright© カノトのアトリエ , 2019 All Rights Reserved Powered by STINGER.