CSS——flex 垂直居中

效果展示：

父级元素:只需要设置justify-content和align-items属性为center即可

<div class="box">
    <p class="boxItem"></p>
 </div>

.box{
   width: 200px;
   height: 200px;
   border: solid 1px red;
   display: flex;
   justify-content: center;  //设置单元格内容的水平位置（左中右）
   align-items: center;　　　//设置单元格的垂直位置（上中下）
 }
 .boxItem{
   width: 50px;
 　height: 50px;
   background: pink;
 }