【CSS】要素をど真ん中に配置する方法【3つ紹介】

要素をど真ん中に配置したいことってありますよね。

ヒーローイメージでも文章などのコンテンツが、
ど真ん中に配置されていることも多いのではないでしょうか。

今回は要素を縦にも横にも真ん中に配置する方法を3つ挙げたいと思います。

ではそれぞれもう少し詳しく見ていきましょう。

1つ目：display: flex;を使った方法

まず1つ目は、display: flex;を使った方法です。

See the Pen
LYbyzNQ by notebook (@orange-notebook)
on CodePen.

HTML

HTMLはとてもシンプルで、
sectionタグの中に真ん中に配置したい要素のdivがあるだけです。
divタグは「.center-item」というクラス名を付けています。

<section>
    <div class="center-item">display: flex;</div>
</section>

CSS

CSSは、親要素にflexboxのプロパティを3つ指定するだけです！
今回の例ではsectionタグを親要素としているので、sectionに指定しています。

section {
    height: 100vh;
    /* 真ん中寄せ */
    display: flex;
    justify-content: center;
    align-items: center;
}

これだけで真ん中に配置することができるので便利ですね。

2つ目：position: absolute;を使った方法

2つ目は、position: absolute;を使った方法です。

See the Pen
NWbjaRW by notebook (@orange-notebook)
on CodePen.

HTML

HTMLは先ほどと同じです。
sectionタグの中に、真ん中に配置したい要素のdivがあるだけです。

表示する文言だけ「position: absolute;」と変えています。

<section>
    <div class="center-item">position: absolute;</div>
</section>

CSS

CSSでは親要素の位置を基準とし、真ん中に配置したい子要素の位置を指定していきます。

そのため親要素と子要素にpositionプロパティを指定し、
プラスで子要素に位置を指定するためのtopとleft、そしてtransformを使います。

/* 親要素 */
section {
    position: relative;
}

/* 真ん中に配置したい要素 */
.center-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

親要素のpositionの値がstatic以外の場合、position:absolute;が指定された子要素は、
親要素の位置を基準として位置の指定をすることができます。
(positionを指定していない要素の値は、デフォルトでstaticになっています。)

今回は真ん中に配置したいので、
親要素にposition: relative;を指定し基準地点となるようにし、
子要素は上から50%(top: 50%)、左から50%(left: 50%)と指定します。

ここまででもきちんと真ん中に配置されそうなかんじがしますが、
これだと真ん中に配置したい要素の左上部分が
親要素の上から50%、左から50%に配置され、ちょうど真ん中に表示されません！

transformがない場合、こんなかんじの表示になってしまいます。。

ボックスの左上が画面真ん中にきている状態ですね。

See the Pen
VwmbMdq by notebook (@orange-notebook)
on CodePen.

transform: translate(-50%, -50%)を追加することで、
子要素自体の半分の幅を、左向きと上向きに戻してくれるので
最初の例のように真ん中に配置できるようになります。

3つ目：display: grid;を使った方法

最後の3つ目は、display: grid;を使った方法です。

See the Pen
by notebook (@orange-notebook)
on CodePen.

HTML

HTMLは先ほどと同じです。
sectionタグの中に、真ん中に配置したい要素のdivがあるだけです。

表示する文言だけ「display: grid;」と変えています。

<section>
  <div class="center-item">display: grid;</div>
</section>

CSS

グリッドレイアウトを使った場合は、
1番短いコードで真ん中寄せにすることができます。

section {
    height: 100vh;
    /* 真ん中寄せ */
    display: grid;
    place-items: center;
}

おわりに

何かと要素を真ん中に表示したい機会って多いですよね。

flexやgridを使った方法は親要素にプロパティを指定するだけで
簡単に実現できるので助かりますね。

以上、要素を真ん中に配置する方法でした。

【2パターン紹介】画像にCSSでオーバーレイをつける方法オーバーレイを画像に重ねることってありますよね。 画像の上にテキストを配置するときも、画像とテキストのコントラストを保つために必要だったりします。 今回は画像にオーバーレイをつける方法を2種類ご紹介したいと思います。...

【CSSのみでスムーススクロール】scroll-behaviorプロパティの使い方1ページのサイトなどではナビゲーションの項目をクリックすると、該当箇所までぐいーんと飛ばしてくれるスムーススクロールが導入されることが多いですよね。 jQueryやプラグインなどで実装されることも多いと思いますが、今回はCSSだけで実装できるscroll-behaviorプロパティの使いかたを まとめてみたいと思います。...