用Flexbox设置垂直居中

2015-08-12阅读(2494)评论(0)牵着狗狗看MM

苏州实时公交查询

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

[html]<div class="flexbox-container">
<div class="flexbox-vert-item">Blah blah</div>
<div class="flexbox-vert-item">Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
</div>
[/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]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 用Flexbox设置垂直居中
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏