css display：flex实现元素垂直居中

在此之前元素垂直居中我使用的是绝对定位absolute或固定定位fixed

如何用flex实现元素垂直居中呢，父级包括子级

<div  class='itemBox'>

    <div>boxboxboxboxboxboxboxboxboxboxbox</div>

</div>

 

.itemBox{

display: flex;

justify-content: center;

align-items: center;

background: #588cfe;

width: 100%;

height: 100vh;

}

.itemBox div{

background: #ffffff;

width: 200px;

height: 200px;

word-break: break-all;//英文超出盒子不换行问题

}