問題
解決策
- 「display: table;」を使用する。
- 「flexbox」を使用する。
- 「position」を使用する。
- 「line-height」を使用する。
要素を上下に中央寄せする
要素を上下に中央寄せする方法として、
- 「display: table;」
- 「flexbox」
- 「position」
- 「line-height」
の4つが挙げられます。
今回はその4つの手法の使用例をご紹介します。
- ※各要素には、以下のCSSを設定しています。
.centerest-box{
height: 150px;
}
.centerest-box .item{
text-align: center;
}
.centerest-box .inner{
display: inline-block;
padding: 10px 15px;
color: #F15A24;
background-color: #FCECE8;
}「display: table;」
「display: table;」は、要素の形式をテーブル（table）として扱います。
そして子要素に「display: table-cell」を設定することで子要素をテーブルのセルとして扱うことができます。
その利点として、
- 高さを揃えることができる。
- 横に並べることができる。
- 上下の位置を決められる「vertical-align」を適用することができる。
の3点があります。
この3点目「vertical-align」を「middle」に設定することで、上下中央寄せを実現することができます。
DEMOはこちら
上下中央寄せ
HTML
<div class="centerest-box type01 bd-box">
<div class="item">
<span class="inner">「display: table;」による<br>上下中央寄せ</span>
</div>
</div>CSS
.centerest-box.type01{
display: table;
}
.centerest-box.type01 .item{
display: table-cell;
vertical-align: middle;
}「flexbox」
「flexbox」は、新しく出てきた、要素の設定形式の1つです。
親要素に「display: flex;」を指定し、さらに「justify-content: center;」と「align-items: center;」を設定することで、子要素を上下中央寄せすることができます。
また、「flexbox」は子要素に対して様々な設定が可能となります。
詳しくは下記の記事をご参照ください。
汎用性がとても高い！「flexbox」の使用方法のご紹介
DEMOはこちら
上下中央寄せ
HTML
<div class="centerest-box type02 bd-box">
<div class="item">
<span class="inner">「flexbox」による<br>上下中央寄せ</span>
</div>
</div>CSS
.centerest-box.type02{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
}「position」
「position」では2通りの上下中央寄せを実現する手法があります。
- ※どちらの手法も、親要素に「position: relative;」を設定する必要があります。
1. 「position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;」を設定する。
これにより、上下左右の位置は均一となり、「margin: auto;」によって、要素の幅、高さに合わせた均等な配置が行われます。
ここに注意！
子要素に高さが指定されていないと上下中央寄せを実現できないので、注意が必要です。
DEMOはこちら
上下中央寄せ①
HTML
<div class="centerest-box type03_1 bd-box">
<div class="item">
<span class="inner">「position」による<br>上下中央寄せ①</span>
</div>
</div>CSS
.centerest-box.type03_1{
position: relative;
}
.centerest-box.type03_1 .item{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 100px;
}2. 「position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)」を設定する。
これにより、親要素の上下左右中央の位置に、子要素の左上が合わさる形で配置されます。
そこから「transform: translate(-50%, -50%)」で、子要素自体の幅の50%分、高さの50%分を逆方向にずらすことにより、上下左右中央寄せを実現することができます。
DEMOはこちら
上下中央寄せ2
HTML
<div class="centerest-box type03_2 bd-box">
<div class="item">
<span class="inner">「position」による<br>上下中央寄せ2</span>
</div>
</div>CSS
.centerest-box.type03_2{
position: relative;
}
.centerest-box.type03_2 .item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}「line-height」
「line-height」による手法は、とても限定的な手法のため、使用する場面が限られます。
使用する条件として、
- 上下中央寄せしたい要素がテキストであること。
- 上下中央寄せしたい要素が一行であること。
- 親要素の高さが決まっていること。
の3つが挙げられます。
手法としては、親要素の高さを決めておき、子要素の高さと「line-height」を親要素の高さと同じにします。
DEMOはこちら
HTML
<div class="centerest-box type04 bd-box">
<div class="item">
<span class="inner">「line-height」による上下中央寄せ</span>
</div>
</div>CSS
.centerest-box.type04 .item{
height: 150px;
line-height: 150px;
}
.centerest-box.type04 .inner{
padding: 0;
background-color: transparent;
}参考
【上下中央揃えのCSSまとめ。Flexboxがたった3行で最も手軽 – ICS MEDIA】
https://ics.media/entry/17522/
【【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右) | WEBクリエイターの部屋】
https://arts-factory.net/position/
【HTML – top:0; bottom:0; margin:auto; で縦中央にならない。。｜teratail】
https://teratail.com/questions/74837
コメント