【CSS】上下のmargin:autoは効かない？仕様を解説！

marginで左右をautoにすると左右中央寄せにできます。

ではmarginの上下をautoにすると上下中央寄せにできるでしょうか？

marginで上下をautoにしたときの仕様について解説します。

当記事ではテーマがぶれないように左右の値は0にします。

「margin:auto 0」と指定すると上下はautoで左右は0になります。

親がブロック要素のとき、上下のautoは0

基本的にmarginの上下のautoは0です。

<style>
.example{
    border: 1px solid #333;
    height: 200px;
    background: #91c5dd;
}
.example>div{
    /*コレ*/margin: auto 0;
    background: #FFF;
    width: 200px;
    border: 1px solid #333;
}
</style>
<div class="example">
    <div>margin:auto 0</div>
</div>

marginの左右がautoのときは左右中央寄せができますが、上下がautoのときは上下中央寄せはできません。

しかし、例外的にmarginの上下autoで上下中央寄せができる場合があります。

親がflexのとき、上下のautoは同じ値

親に「display: flex」がかかっていると「margin:auto 0」で上下中央寄せができます。

<style>
.example2{
    /*コレ*/display: flex;
    border: 1px solid #333;
    height: 200px;
    background: #91c5dd;
}
.example2>div{
    /*コレ*/margin: auto 0;
    background: #FFF;
    width: 200px;
    border: 1px solid #333;
}
</style>
<div class="example2">
    <div>margin:auto 0</div>
</div>

flexで上下中央寄せする方法といえば「align-items: center」ですが、実はこれを使わなくても、子要素に「margin:auto 0」を指定するだけでも上下中央寄せ可能なのです。

position: absoluteのとき、上下のautoは同じ値

position: absoluteを使って上下中央寄せするとき「margin: auto 0」を使います。

<style>
.example3{
    position: relative;
    border: 1px solid #333;
    height: 200px;
    background: #91c5dd;
}
.example3>div{
    /*コレ*/margin: auto 0;
    /*コレ*/position: absolute;
    /*コレ*/top: 0;
    /*コレ*/bottom: 0;
    /*コレ*/height: 100px;
    background: #FFF;
    width: 200px;
    border: 1px solid #333;
}
</style>
<div class="example3">
    <div>margin:auto 0</div>
</div>

position: absoluteで上下中央寄せするにはtopとbottomを同じ値にし、heightを指定したうえで「margin: auto 0」を指定します。

左右も中央寄せする場合はleftとrightも同じ値にし、左右のmarginをautoにします。

【まとめ】上下のmargin:autoの仕様

• 基本的にmarginの上下のautoは0
• 親に「display: flex」がかかっていると「margin:auto 0」で上下中央寄せができる。
• position: absoluteを指定し、topとbottomを同じ値にし、heightを指定したうえで「margin: auto 0」を指定で上下中央寄せができる。

以上、上下のmargin:autoの仕様について解説しました。