CSS で Div を水平方向に中央揃え

1. CSS で margin プロパティを使用して div を水平方向に中央揃えにする
2. CSS で Flexbox を使用して div を水平方向に中央揃えにする
3. CSS で div を inline-block に設定し、text-align プロパティを使用して水平方向に中央揃えにする

この記事では、CSS で div を水平方向に中央揃えにするいくつかの方法について説明します。

CSS で margin プロパティを使用して div を水平方向に中央揃えにする

margin プロパティを使用すると、CSS で div を水平方向に中央揃えできます。

margin プロパティは、要素からの 4つの方向すべてのマージンを設定するための省略形です。このプロパティを使用して、top、right、bottom、left の順にマージンを割り当てることができます。

左右の余白に auto オプションを使用して、div を水平方向に中央揃えにすることができます。上マージンと下マージンは 0 に設定できます。

auto オプションは要素を中央に配置し、左右の余白を均等に分割します。中央に配置する要素の幅を指定する必要があります。

要素は指定された幅を占め、残りの水平方向のスペースは左右に均等に分割されます。

例を見てみましょう。要素の幅が 50%の場合、auto プロパティは 25%の左マージンと 25%の右マージンを作成します。

display プロパティを使用して、要素を table に設定することもできます。このような場合、テーブルにコンテンツがある場合は幅を指定する必要はありません。

コンテンツの幅が使用されます。内側の div にコンテンツを書き込まない場合は、特定の幅を指定します。

たとえば、HTML でクラス名 outerDiv を使用して div を作成します。次に、HTML の outerDiv 内に別の innerDiv をネストします。

CSS で、outerDiv クラスの width を 100%に、background を blue に設定します。次に、innerDiv を選択し、display プロパティを table に設定します。

その background を red に、height と width を 10vh と 10vw に設定します。最後に margin を 0 auto に設定する。

ここで、margin プロパティの 0 は、上下のマージンです。auto オプションは、左右のマージン用です。CSS の margin プロパティを使用して、div を水平方向に中央揃えできます。

サンプルコード：

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

CSS で Flexbox を使用して div を水平方向に中央揃えにする

フレックスボックスのプロパティを使用して、CSS で div を水平方向に中央揃えにすることができます。

Flexbox は、要素を垂直方向と水平方向に中央揃えする簡単な方法を提供します。フレックスを作成し、要素がフレックスボックスにどのように配置されるかを定義できます。

justify-content プロパティを使用して、コンテンツが使用可能なスペースのすべてを使用しない場合に、フレックスボックス内のコンテンツの水平位置を指定できます。justify-content プロパティを使用して、外側のコンテナにフレックスボックスを作成し、内側のコンテナの位置を中央に設定できます。

たとえば、innerDiv クラスを選択し、height および width プロパティを 10vh および 10vw に設定します。背景色として black を設定します。次に、outerDiv クラスを選択し、width を 100%にします。

背景色を 100%に設定します。次に、display プロパティを flex に設定して、コンテナをフレックスボックスとして作成します。その後、オプション center を justify-content プロパティに書き込みます。

したがって、CSS Flexbox を使用して、CSS で div を水平方向に中央揃えにすることができます。

サンプルコード：

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

CSS で div を inline-block に設定し、text-align プロパティを使用して水平方向に中央揃えにする

CSS で div を水平方向に中央揃えする別の方法は、div を inline-block 要素として設定することです。インラインと同様に、inline-block 要素は新しい行で開始されません。

ただし、width と height を設定することができます。次に、外側の div の text-align プロパティを使用して、内側の div を水平方向に中央揃えにします。

内側の div は外側の div から text-align プロパティを継承し、要素を中央に配置できます。

たとえば、上記の方法で、高さ、幅、背景を内側の div に設定します。次に、display プロパティを使用して、要素を inline-block に設定します。

外側の div で、幅と背景を設定します。最後に、text-align プロパティを center に設定します。

このようにして、CSS で div を水平方向に中央揃えにすることができます。

サンプルコード：

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>