東京都府中市、九段下のWEB制作会社Maromaroのブログです

2018.05.01

hoshida

CSSで上下中央揃えにする4つの方法

CSSで要素を左右中央揃えすることは容易ですが、上下中央となると若干難しくなります。その方法を紹介します。それぞれに特徴があるので、ケースによって使い分けましょう。

display table-cell を使う

  • RESULT
  • HTML
  • CSS
  • コピー
    
    <div class="parent1">
    <div>
    <div class="child1">子</div>
    </p></div>
    </div>
    
  • コピー
    
    .parent1{
      display:table;
    }
    .parent1 > div{
      width:100px;
      height:100px;
      display:table-cell;
      vertical-align:middle;
      text-align:center;
      background:#F7BABB;
    }
    .child1{
      background:#87ABF4;
    }
    
  • コピー

・親要素のサイズが決定している必要がある
・親子ともにサイズを指定しなくて良いので柔軟
・入れ子が多くなる

table-cell の中の要素に対しては、vertical-align が有効になります。display:table-cell;を指定した要素は親にdisplay:table;の要素が無いとサイズの指定が出来なくなるので、入れ子が余分に必要です。text-align:center;を指定すれば左右の中央揃えも容易です。

position absolute を使うその1

  • RESULT
  • HTML
  • CSS
  • コピー
    
    <div class="parent2">
    <div class="child2">子</div>
    </div>
    
  • コピー
    
    .parent2{
      height:100px;
      width:100px;
      position:relative;
      background:#F7BABB;
    }
    .child2{
      height:50px;
      position:absolute;
      top:50%;
      margin-top:-25px;
      background:#87ABF4;
    }
    
  • コピー

・子要素のサイズが決定している必要がある

position:absolute;を指定した要素への位置指定を「%」で行い、要素の幅の半分の値をネガティブマージンとして指定します。コーディング時に要素の半分の値をいちいち入力しないといけないのがちょっと面倒です。同じ方法で左右中央揃えも可能です。

position absolute を使うその2

  • RESULT
  • HTML
  • CSS
  • コピー
    
    <div class="parent3">
    <div class="child3">子</div>
    </div>
    
  • コピー
    
    .parent3{
      height:100px;
      width:100px;
      position:relative;
      background:#F7BABB;
    }
    .child3{
      height:50px;
      position:absolute;
      top:0;
      bottom:0;
      margin-top:auto;
      margin-bottom:auto;
      background:#87ABF4;
    }
    
  • コピー

・子要素の高さが決定している必要がある
・その1よりコーディングが楽

position:absolute;を指定した要素のtopやbottom等の値が「auto」以外あり、margin-top,margin-bottomの値が「auto」だと、要素は親要素の中央に位置します。同じ方法で左右中央も指定できます。

padding を使う

  • RESULT
  • HTML
  • CSS
  • コピー
    
    <div class="parent4">
    <div class="child4">子</div>
    </div>
    
  • コピー
    
    .parent4{
      width:100px;
      padding-top:50px;
      padding-bottom:50px;
      background:#F7BABB;
    }
    .child4{
      background:#87ABF4;
    }
    
  • コピー

・親要素のサイズが子要素に応じて変わる

親要素のサイズが変わっても良いケースなら、上下に同一paddingを指定するのが最もシンプルです。

以上です!対象がモダンブラウザのみであればdisplay:flex;を用いるのも有効です。ただ私があまりflexを把握しきれていないので、今回は割愛しています。

ではでは。