なかの要素を上下左右を中央にしたいという要望ってよくあると思います。
上下左右を中央にする方法はいくつかあります。
cssで上下左右中央にする方法
flexを使う
1つ目はflexを使う方法です。
下記の3つのcssを使うことで簡単に上下左右を中央にすることができます。
display: flex;
align-items: center;
justify-content: center;
html
<div class="box box0">
アイテム1です。アイテム1です。<br>アイテム2です。<br>アイテム3です。アイテム3です。
</div>
css
.box0{
display: flex;
align-items: center;
justify-content: center;
}
サンプル
アイテム1です。アイテム1です。
アイテム2です。
アイテム3です。アイテム3です。
アイテム2です。
アイテム3です。アイテム3です。
子要素に複数の要素がある場合
html
たとえば子要素にタグが複数ある場合はflexをかける下記のようになります。
<div class="box box1">
<div class="item1">アイテム1です。アイテム1です。</div>
<div class="item2">アイテム2です。</div>
<div class="item3">アイテム3です。アイテム3です。</div>
</div>
サンプル
アイテム1です。アイテム1です。
アイテム2です。
アイテム3です。アイテム3です。
そうした場合は子要素をタグで囲ってあげます。
html
<div class="box box1">
<div class="inner">
<div class="item1">アイテム1です。アイテム1です。</div>
<div class="item2">アイテム2です。</div>
<div class="item3">アイテム3です。アイテム3です。</div>
</div>
</div>
サンプル
アイテム1です。アイテム1です。
アイテム2です。
アイテム3です。アイテム3です。
gridを使う
2つ目はgridを使う方法です。
html
<div class="box box2">
<div class="inner">
<div class="item1">アイテム1です。アイテム1です。</div>
<div class="item2">アイテム2です。</div>
<div class="item3">アイテム3です。アイテム3です。</div>
</div>
</div>
css
下記の2つを使うことで上下左右が中央になるのでさきほどのflexより少ない記述で書けますね。
.box2{
display: grid;
place-items: center;
}
サンプル
アイテム1です。アイテム1です。
アイテム2です。
アイテム3です。アイテム3です。
transformを使う
html
<div class="box box3">
<div class="inner">
<div class="item1">アイテム1です。アイテム1です。</div>
<div class="item2">アイテム2です。</div>
<div class="item3">アイテム3です。アイテム3です。</div>
</div>
</div>
css
下記は要素の上から50%、左から50%に移動させて要素の大きさの半分を戻す方法になります。
.box3{position: relative;}
.box3 .inner{
position: absolute;
top: 50%;
left: 50%;
width: 250px;
transform: translateY(-50%) translateX(-50%);
}
サンプル
アイテム1です。アイテム1です。
アイテム2です。
アイテム3です。アイテム3です。
コメント