flex布局实现垂直居中

flex布局实现垂直居中
例如这种实现垂直居中效果

1.png

html代码：

css代码：

div{
  display: flex;
  align-items: center;
  height: 310px;
  background-color: pink;
}

注意：主要是 display：flex 和 align-items:center 这两个属性！