flex水平垂直居中

<div class="parent">
  <div class="children">我是通过flex的水平垂直居中噢！</div>
</div>

html,body{
  width: 100%;
  height: 200px;
}
.parent {
  display:flex;
  align-items: center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  width:100%;
  height:100%;
  background-color:red;
}
.children {
  background-color:blue;
}