css中display：flex屬性實作元素垂直居中的程式碼

這篇文章要跟大家介紹的內容就是關於css中display：flex屬性實作元素垂直居中的程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

如何用flex實現元素垂直居中呢，父級包括子級

<div  class=&#39;itemBox&#39;>
    <div>boxboxboxboxboxboxboxboxboxboxbox</div>
</div>
 
.itemBox{
display: flex;
justify-content: center;
align-items: center;
background: #588cfe;
width: 100%;
height: 100vh;
}
.itemBox p{
background: #ffffff;
width: 200px;
height: 200px;
word-break: break-all;//英文超出盒子不换行问题
}

#相關文章推薦：

CSS中text-transform屬性實作字串轉換的程式碼

CSS中table表格的兩種使用方法（實例）

以上是css中display：flex屬性實作元素垂直居中的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！