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;
 }