【CSS】div要素をや左寄せ、右寄せ、中央、真ん中、ミドル、ボトムに配置するまとめ
div要素を真ん中やミドル、ボトムに配置する方法です。書き方を忘れがちなので以下にまとめておきます。
目次
1. はじめに
例では、横200px、縦200pxのグレーのdiv内に、テキストでhogeのみ記述されたdivを作成しました。
このhogeをCSSを使い、各場所に配置していきます。
html
<div class="box">
<div class="">
hoge
</div>
</div>css
.box {
width: 200px;
height: 200px;
background: gray;
}2. 左寄せ
単純な左寄せのみなら、以下のようなCSSはいらなかもしれませんが例としてあげておきます。
html
<div class="box">
<div class="left">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.left {
position: absolute;
left: 0%;
transform: translateX(0%);
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
}3. 中央寄せ
単純な中央寄せのみなら、以下のようなCSSはいらなかもしれませんが例としてあげておきます。
html
<div class="box">
<div class="center">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.center {
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}4. 右寄せ
単純な右寄せのみなら、以下のようなCSSはいらなかもしれませんが例としてあげておきます。
html
<div class="box">
<div class="right">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.right {
position: absolute;
left: 100%;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-ms-transform: translateX(-100%);
}5. ミドル左寄せ
ミドル（縦方向中央）の左寄せです。
html
<div class="box">
<div class="middle_and_left">
<div class="contents_box">
hoge
</div>
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.middle_and_left {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}6. ミドル中央（ど真ん中はこちら）
ミドル（縦方向中央）の中央寄せです。これでhogeをど真ん中に配置することができます。
html
<div class="box">
<div class="middle_and_center">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.middle_and_center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}7. ミドル右寄せ
ミドル（縦方向中央）の右寄せです。
html
<div class="box">
<div class="middle_and_right">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.middle_and_right {
position: absolute;
top: 50%;
left: 100%;
transform: translate(-100%,-50%);
-webkit-transform: translate(-100%,-50%);
-ms-transform: translate(-100%,-50%);
}8. ボトム左寄せ
ボトム（縦方向下）の左寄せです。
html
<div class="box">
<div class="bottom_and_left">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.bottom_and_left {
position: absolute;
top: 100%;
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
}9. ボトム中央
ボトム（縦方向下）の中央寄せです。
html
<div class="box">
<div class="bottom_and_center">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.bottom_and_center {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%,-100%);
-webkit-transform: translate(-50%,-100%);
-ms-transform: translate(-50%,-50%);
}10. ボトム右寄せ
ボトム（縦方向下）の右寄せです。
html
<div class="box">
<div class="bottom_and_right">
hoge
</div>
</div>css
.box {
position: relative;
width: 200px;
height: 200px;
background: gray;
}
.bottom_and_right {
position: absolute;
top: 100%;
left: 100%;
transform: translate(-100%,-100%);
-webkit-transform: translate(-100%,-100%);
-ms-transform: translate(-100%,-100%);
}11. まとめ
外側の要素のpositionをrelativeに指定して、内側の要素（配置したい要素）のpositionをabsoluteに設定。
内側要素（配置したい要素）のtop,left属性を0%(左寄せ、トップ),50%(中央寄せ、ミドル),100%(右寄せ、ボトム)のうち目的の数値を指定。
top,left属性に指定した％値の逆数％値をtranslateに指定。
translateを適切に指定しないと、外側要素から内側の要素がはみ出してしまうので要注意。
translateのマイナス値は、はみ出してしまう内側要素の高さや幅分、XY軸を戻すといったイメージ。