flex布局实现子元素在父元素下水平垂直居中

<div class='dad'>
   <div class='son'></div>
</div>

.dad{
  height: 200px;
  width: 200px;
  border: 1px solid blue;
  margin: 50px;
  display: flex; //设置父元素flex属性
  justify-content: center;//左右居中
  align-items: center;//上下居中
}
.son{
   height: 100px;
   width: 100px;
   border: 1px solid pink;
}