2015/09/16

超簡単！CSSで上下左右センターにする方法

display:flexを使ってCSSで上下左右センターに

CSSを使って上下左右センターにする方法はいろいろありますが、このdisplay:flexを使う方法がもっとも簡単でコードもシンプルになりそうです。

HTML

HTMLは以下のような感じです。
実際に使用する場合は、div部分を用途に合わせて変えてください。

<div class="vertical-center">
        <img src="https://unsplash.it/200/300">
        <p>上下左右センター</p>
</div>

<p>上下左右センター</p>

</div>

CSS

続いてはCSS。

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.vertical-center {

min-height: 100%;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

min-height: 100vhの「vh」は「viewport height」の略称になります。
％と何が違うのかというと、「デバイスの画面」を基準にするところです。
これでmin-heightがうまく効かないデバイスでも機能するようにします。
display: flexでフレックスボックス化します。
align-items: centerで上下センターに。
justify-content: centerで左右センターに。
flex-direction: columnは改行したときの方向へ並ぶようにするプロパティです。これで、2つ以上の要素を上下に並べます。