Flex布局垂直居中

方案一：

//style
.wrap{
  display: flex;
  justify-content: center;
}
.child{
  align-self: center;
}
//html
<div class="wrap">
  <div class="child"></div>
</div>

方案二：

//style
.wrap{
  display: flex;
  justify-content: center;
  align-items: center;
}
//html
<div class="wrap">
  <div class="child"></div>
</div>

方案三：

//style
.wrap{
  display: flex;
  place-content: center;
  place-items: center;
}
//html
<div class="wrap">
  <div class="child"></div>
</div>

Flex布局垂直居中多个元素

方案一：

//style
.wrap{
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
}
//html
<div class="wrap">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

方案二：

//style
.wrap{
  display: flex;
  flex-direction: column;
  place-content: center;
}
.wrap > * {
  align-self: center;
}
//html
<div class="wrap">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>