/* ===============
/* margin＋positionで上下中央寄せ
==================*/
.absolute {
  position: relative;
}
.absolute .box--item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content; /* widthの指定は必須 */
  height: fit-content; /* heightの指定は必須 */
}

/* ===============
margin＋flexで上下中央寄せ
==================*/
.flex {
  display: flex;
}
.flex .box--item {
  margin: auto;
}


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