【コピペOK！】ブロックの中のブロック要素を上下左右中央に揃える方法【HTML/CSS】

FUNA

こんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はブロック内のブロック要素（つまりdivタグ内のpタグやdivタグなどです）を上下左右中央に揃える方法を伝授します。

レスポンシブWebデザインにも対応しやすい方法をいくつかご紹介していきます！

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ！

まずは、普通に左右を中央にする方法をおさらい

中身のテキストや画像といった要素の中央寄せは簡単ですね。

左右を中央にする方法をとしては大きく分けて３つあります。

順番に見ていきましょう。

【左右中央揃えの方法①】「text-align:center;」を使う方法

こちらは最も基本の左右中央寄せの方法ですね。

親要素となるブロック要素に「text-align:center;」を指定するだけです。

See the Pen right left center by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【左右中央揃えの方法②】「margin: 0 auto;」を使う方法

次に紹介するのもよく使われる「margin: 0 auto;」で左右中央にする方法です。

この方法だとwidthの指定は必須になりますが、「%」で単位を指定することでレスポンシブWebデザインへの対応が可能となっています。

FUNA

PCで最大幅を決めるために、max-widthを合わせて使うこともあるので覚えておきましょう！

See the Pen margin: 0 auto; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【左右中央揃えの方法③】「display: inline-block;」を使う方法

先ほどと違いwidthを決めずに、内容量に応じた幅でブロックを中央寄せにしたい場合はこちらを使いましょう。

See the Pen display: inline-block; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

上下左右で中央に揃える方法

今回は上下左右で中央に揃える４つの方法をご紹介します。

順番に紹介しますが、よりわかりやすくそれぞれの方法を比較できるように下記に注意してください。

【上下左右中央揃えの方法①】「vertical-align: middle;」を使う方法

内要素よりも高さのあるブロックで、中身を上下中央寄せにしたいときは「vertical-align」が活躍します。

ただし、「vertical-align」が使えるのはインライン要素・テーブルセルのどちらかなので、上下中央寄せにしたいテキストを内包する要素に「display: table-cell;」を指定しましてください。

See the Pen vertical-align: middle; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【上下左右中央揃えの方法②】「position: absolute;」「margin: auto;」を使う方法

この方法では、ブロックに「width」「height」指定が必須です。

つまり、もし子要素の高さが指定したheightを超える場合にはみ出てしまいます。

特にレスポンシブWebデザインで使用する場合には「テキストなどの動的に変わるもの」にはあまり適さない方法です。

FUNA

下記のソースコードのプレビューもテキストが多くなっているので、表示が崩れているかと思います。

See the Pen 「position: absolute;」「margin: auto;」 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

テキストを小要素に入れたいけどブロックの高さを指定するのはちょっと。。

そのような方はこの後紹介する「transform」と「display: flex;」を試してください。

【上下左右中央揃えの方法③】「transform」を使う方法

transformを使う方法では、コードは少ないですがやっていることが少しややこしいので、順番に説明します。

1. 左上を起点として上から50%・左から50%の位置に移動します。（top: 50%; left: 50%;）
2. 要素の大きさの半分ずつを戻す（transform: translateY(-50%) translateX(-50%);）
3. これで親要素の上下左右中央に配置することができます。

See the Pen transform by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【上下左右中央揃えの方法④】「display: flex;」を使う方法

最後に紹介するのは「display: flex;」を使って上下左右中央揃えにする方法です。

記述もシンプルで非常に便利ですね。

See the Pen display: flex; by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA

この方法とてもシンプルで便利なのですが、一つだけ注意があって「IE9以下に未対応」なので、対応させるブラウザに注意して使うようにしてくださいね！

関連記事