Code for display: flex attribute in css to implement vertical centering of elements

This article introduces to you the display: flex attribute in CSS to implement the code for vertical centering of elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Before this, I used absolute positioning absolute or fixed positioning fixed

How to use flex to vertically center elements, the parent includes the child

<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;//英文超出盒子不换行问题
}

Recommended related articles:

Code for text-transform attribute in CSS to implement string conversion

Two ways to use tables in CSS (examples)

The above is the detailed content of Code for display: flex attribute in css to implement vertical centering of elements. For more information, please follow other related articles on the PHP Chinese website!