<!-- 上下左右中央寄せ -->
<div class="box flex_vh">
  <div class="box--item">
    Flexboxで<br>上下左右中央
  </div>
</div>

<!-- 上下中央寄せ -->
<div class="box flex_v">
  <div class="box--item">
    Flexboxで<br>上下中央
  </div>
</div>

<!-- 左右中央寄せ -->
<div class="box flex_h">
  <div class="box--item">
    Flexboxで<br>左右中央
  </div>
</div>
.box {
  display: flex;
}

/* ===============
上下左右中央寄せ
==================*/
.flex_vh {
  justify-content: center;
  align-items: center;
}

/* ===============
上下中央寄せ
==================*/
.flex_v {
  align-items: center;
}

/* ===============
左右中央寄せ
==================*/
.flex_h {
  justify-content: center;
}


/* ===============
装飾のためのCSS
==================*/
.box {
  background-color: #efefef;
  height: 200px;
}
.box + .box {
  margin-top: 40px;
}
.box--item {
  background-color: #2eb7cf;
  color: #fff;
  font-weight: bold;
  padding: 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.