Home > Article > Web Front-end > 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='itemBox'> <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!