Flexboxで簡単に要素を縦横中央に配置するサンプルコード

Flexboxを使うと、縦横中央寄せがシンプルなCSSだけで実現できます。
このページでは、自分用メモとしてコピペ可能なサンプルコードを掲載しています。

完成形

以下はFlexboxを使って中央寄せしたボックスの完成イメージです。

中央寄せ

コード

コピペして使えるHTML＋CSSのサンプルです。

<div class="wrap">
  <div class="container">中央寄せ</div>
</div>

<style>
  .wrap {
    width: 90%;
    max-width: 500px;
    height: 500px;
    margin: 0 auto;
    background-color: #0072ff;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .container {
    width: 200px;
    height: 200px;
    background-color: #f4f5f7;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>