【CSS】position:absoluteで上下左右中央寄せする方法

「position:absoluteで中央寄せするのどうやるんだったっけ？」

position:absoluteで上下左右中央寄せする方法を解説します。

【方法1】transform:translate(-50%,-50%)

中央寄せする要素に下記を指定しましょう。

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

<style>
.example{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example div{
    position: absolute;
    left: 50%;
    top: 50%;
    /*コレ*/transform: translate(-50%,-50%);
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example">
    <div>position:absolute</div>
</div>

transform:translate(○,○)は指定した分だけ要素をずらすCSSです。

ずらす理由について下記で解説します。

transformがない場合

transformがない場合、要素の左上の頂点が中央に位置します。

そこで要素の横半分、縦半分ずらすことで中央寄せを実現します。

<style>
.example2{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example2 div{
    position: absolute;
    left: 50%;
    top: 50%;
    /*コメントアウトtransform: translate(-50%,-50%);*/
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example2">
    <div>position:absolute</div>
</div>

左右中央寄せ

左右だけの中央寄せをしたい場合は、「top:auto」にし、「transform: translate(-50%,0)」または「transform:translateX(-50%)」を指定しましょう。

「top:auto」は初期値のため削除でもOKです。

position: absolute;
left: 50%;
transform: translate(-50%,0);

<style>
.example3{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example3 div{
    position: absolute;
    left: 50%;
    /*top: 50%;*/
    transform: translate(-50%,0);
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example3">
    <div>position:absolute</div>
</div>

上下中央寄せ

左右だけの中央寄せをしたい場合は、「left:auto」にし、「transform: translate(0,-50%)」または「transform:translateY(-50%)」を指定しましょう。

「left:auto」は初期値のため削除でもOKです。

position: absolute;
top: 50%;
transform: translate(0,-50%);

<style>
.example4{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example4 div{
    position: absolute;
    /*left: 50%;*/
    top: 50%;
    transform: translate(0,-50%);
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example4">
    <div>position:absolute</div>
</div>

【方法2】margin:auto

widthとheightが指定されている場合には下記の方法でも中央寄せできます。

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: ○○;
height: ○○;

<style>
.example5{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example5 div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    height: 50%;
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example5">
    <div>position:absolute</div>
</div>

top,left,bottm,rightをすべて同じ値にし、「margin:auto」を指定すると上下中央寄せになります。

先述した通り、widthとheightがauto以外の値になっている必要があります。

autoの場合は「transform:translate(-50%,-50%)」の方法を使いましょう。

左右中央寄せ

左右だけ中央寄せする場合は、「top」または「bottom」またはその両方の値をautoにしましょう。

このとき、heightはautoでも構いません。

position: absolute;
left: 0;
right: 0;
margin: auto;
width: ○○;

<style>
.example6{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example6 div{
    position: absolute;
    /*top: 0;*/
    /*bottom: 0;*/
    left: 0;
    right: 0;
    margin: auto;
    width: 50%;
    /*height: 50%;*/
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example6">
    <div>position:absolute</div>
</div>

上下中央寄せ

左右だけ中央寄せする場合は、「left」または「right」またはその両方の値をautoにしましょう。

このとき、widthはautoでも構いません。

position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: ○○;

<style>
.example7{
    height: 200px;
    background: #baf2ff;
    border: 1px solid #333;
    position: relative;
}
.example7 div{
    position: absolute;
    top: 0;
    bottom: 0;
    /*left: 0;*/
    /*right: 0;*/
    margin: auto;
    /*width: 50%;*/
    height: 50%;
    background: #FFF;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example7">
    <div>position:absolute</div>
</div>

【まとめ】absoluteで中央寄せする方法

方法1（万能タイプ）

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

方法2（width,height指定タイプ）

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: ○○;
height: ○○;

以上、position:absoluteで上下左右中央寄せする方法でした。