Home  >  Article  >  Web Front-end  >  Code for display: flex attribute in css to implement vertical centering of elements

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

不言
不言Original
2018-08-06 17:00:562968browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn