html flex上下居中,用Flexbox设置垂直居中

用Flexbox设置垂直居中的话需要有父元素与子元素。

[html]

Blah blah

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

[/html]

子元素垂直居中，我们只需要对父元素的CSS属性设置

[css].flexbox-container {

padding: 20px;

background: #eee;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-ms-flex-align: center;

-webkit-align-items: center;

-webkit-box-align: center;

align-items: center;

}

/*子元素的CSS请忽略，只是为了演示效果*/

.flexbox-vert-item {

width: 300px;

background: #fefefe;

margin-right: 20px;

padding: 10px;

}

[/css]