CodePen Embed - verticle center use flex

<div>
  <span>使用弹性布局达到垂直居中的效果</span>
</div>

div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
  background: black;
}

span {
  background: white;
}

This Pen is owned by Pengfei Wang on CodePen.

This Pen doesn't use any external CSS resources.

This Pen doesn't use any external JavaScript resources.