Using Flexbox to achieve vertical centering of CSS

Vertical centering requires a parent element and a child element to complete the collaboration.

<div class= "Flexbox-container" ><div>blah Blah</div><div>blah Blah Blah Blah Blah ... </div ></div>

... But in order for the child element to be centered vertically, you only need to apply a CSS style to the parent element:

. flexbox-container {display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-align:center;- Webkit-align-items:center;-webkit-box-align:center;align-items:center;}

Because the browser engine prefix is used above, it looks a bit complicated, but actually it's very simple, and it's 2 lines of code. There are several ways to do this before the CSS is centered vertically, but using Flexbox is a very beautiful solution. I believe I will find flexbox more valuable usage in the future.

Using Flexbox to achieve vertical centering of CSS