A Little Each Day

note to self

CSSで要素を中央寄せする方法

こんにちは。

text-align

文章や文字などを中央寄せしたい場合は、その文章や文字が含まれる要素か、その親要素に text-align: center; を指定してあげると上下左右中央になります。

<div class="outer">
  <p>center</p>
</div>
.outer{
  text-align: center;
}


また画像のセンタリングも text-align: center; を使うと中央寄せにできます。

imgタグで注意するのは、imgタグ自身にtext-align:center; を指定しても中央寄せできない点です。

必ずimgタグの親要素に指定しましょう。

<div class="outer">
  <img src="..." />
</div>
.outer{
  text-align: center;
}

inline-block

line-height

margin

block要素を中央寄せするのはmarginを使います。

marginの左右をautoで指定することにより、要素が水平方向に中央に寄ってくれます。

<div class="block-center">margin</div>
.block-center{
  margin: 0 auto;
  width: 100px;


ここで注意なのは中央寄せしたい要素にwidth(レイアウトによってはheight)を設定しないと、要素が親要素いっぱいまで伸びてしまうので必ず子要素には長さ(または高さ)を指定しましょう。


vertical-align: middle;

vertical-align が使えるのはinline要素・table-cellのどちらかで、上下中央寄せにしたいテキストなどを内包する要素にdisplay: table-cell;を指定してあげます。

<div class="outer">
  <div class="inner">
    テキスト
  </div>
</div>
.outer{
  display: table;
  width: 100%;
}
.inner{
  display: table-cell;
  vertical-align: middle;
}

position: absolute; + margin: auto;

transform

こちらは子要素を親要素の上から50%・左から50%に移動してから、子要素を半分に戻すというやり方です。

<div class="outer">
  <div class="inner">
    テキスト
  </div>
</div>
.outer{
  position: relative;
}
.inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


これだと要素の高さや幅に左右されないのでレスポンシブデザインにも便利です。


flex

flexboxを使うと簡単に天地中央寄せできます。

<div class="outer">
  <div class="inner">
    テキスト
  </div>
</div>
.outer{
  display: flex;
  align-items: center;
  justify-content: center;
}


ただモダンブラウザしか対応していないのがネックです。

IE9以下に対応しなくてよければflexがオススメです。



本日は以上です。