CSSで要素を中央寄せする

こんにちは、エムケーワイです。

この2～3ヶ月ほどある資格を取得するための勉強をしておりまして、Webサイト作成の勉強ができておりませんでした。そんなわけで最近はベトナム株の状況の投稿ばかりでしたが、久しぶりにWebサイト作成に関する記事を投稿したいと思います。内容はリハビリを兼ねて、要素を中央寄せ配置する方法の復習です。

中央寄せには左右(水平)方向の中央寄せと上下(垂直)方向の中央寄せがありますが、両方をまとめて復習します。

1. インライン要素の中央寄せ
2. ブロック要素の中央寄せ
3. まとめ

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

まずはインライン要素の中央寄せです。

ボックスの上下左右中央に文字列”Hello world!”を表示します。

< HTMLコード >

<p class="mkyTextBox1">
    <span>Hello world!</span>
</p>

< CSS設定 >

.mkyTextBox1 {
    width: 300px;
    height: 300px;
    background-color: darkred;
    color: white;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

ボックス(クラス”mkyTextBox1″を持つp要素)のサイズを300px × 300pxとし、文字列の位置は、左右方向は”text-align: center”で、上下方向は”vertical-align: middle”で中央寄せしています。

“vertical-align: middle”で上下方向の中央寄せを行うには、”display: table-cell”としておく必要があります。

< 結果 >

2. ブロック要素の中央寄せ

次にブロック要素の中央寄せです。

外側のボックスのサイズを300px × 300px、内側のボックスのサイズを200px × 200pxとし、内側のボックスを外側のボックスの上下左右中央に配置します。

ブロック要素の中央寄せには複数の方法があります。

2-1. “margin: auto”を使用する方法

< HTMLコード >

<div class="mkyOuterBox1">
    <div class="mkyInnerBox1">
    </div>
</div>

< CSS設定 >

.mkyOuterBox1 {
    width: 300px;
    height: 300px;
    background-color: darkblue;
    position: relative;
}

.mkyInnerBox1 {
    width: 200px;
    height: 200px;
    background-color: darkred;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

外側のボックス(クラス”mkyOuterBox1″を持つdiv要素)に”position: relative”、内側のボックス(クラス”mkyInnerBox1″を持つdiv要素)に”position: absolute”を設定します。

内側のボックスの”top”、”left”、”bottom”、”right”を全て0とし、”margin: auto”とすることで、上下および左右に均等にマージンが設定されます。

< 結果 >

2-2. “transform”を使用する方法

< HTMLコード >

<div class="mkyOuterBox2">
    <div class="mkyInnerBox2">
    </div>
</div>

< CSS設定 >

.mkyOuterBox2 {
    width: 300px;
    height: 300px;
    background-color: darkblue;
    position: relative;
}

.mkyInnerBox2 {
    width: 200px;
    height: 200px;
    background-color: darkred;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

2-1.と同様外側のボックス(クラス”mkyOuterBox2″を持つdiv要素)に”position: relative”、内側のボックス(クラス”mkyInnerBox2″を持つdiv要素)に”position: absolute”を設定します。

内側のボックスの位置は、まず”top: 50%”、”left: 50%”とすることで、左上角が外側のボックスの中心に配置されます。そして”transform: translate(-50%, -50%)”とすることで、内側のボックスの幅および高さの1/2ずつマイナス方向に移動し、結果として外側のボックスの上下左右中央に配置されます。

< 結果 >

2-3. “display: flex”を使用する方法

< HTMLコード >

<div class="mkyOuterBox3">
    <div class="mkyInnerBox3">
    </div>
</div>

< CSS設定 >

.mkyOuterBox3 {
    width: 300px;
    height: 300px;
    background-color: darkblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mkyInnerBox3 {
    width: 200px;
    height: 200px;
    background-color: darkred;
}

この方法では、上記の2つの方法と異なり、内側のボックス(クラス”mkyInnerBox3″を持つdiv要素)に対しては位置に関する設定を行いません。

外側のボックス(クラス”mkyOuterBox3″を持つdiv要素)に対し、内側の要素をどのように配置するかを設定します。

まず、”display: flex”を設定します。そして”justify-content: center”により左右方向の中央寄せ、”align-items: center”により上下方向の中央寄せを行います。

この方法は外側のボックス内に複数の要素が存在する場合にも中央寄せにすることができます。

< 結果 >

3. まとめ

CSSでインライン要素、ブロック要素を中央寄せする方法をまとめました。

ブロック要素を中央寄せする方法は複数ありますが、個人的には最後の”display: flex”を使用する方法が設定項目も少なく、最も洗練されているかなと思います。

いかがでしたでしょうか？

基本的ですが、重要な内容ですよね。

最後までお読みいただきありがとうございました。