用flex做垂直居中
Posted 小猪宿州
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用flex做垂直居中相关的知识,希望对你有一定的参考价值。
<div class="flex-cont flex-centerbox"> <div class="center-cont"> <h2>Title</h2> <p>infomation </p> <p>infomation </p> <button class="f-btn">btn</button> </div> </div>
css
.flex-cont{ /*定义为flexbox的"父元素"*/ display: -webkit-box; display: -webkit-flex; display: flex; } .flex-item{ /*给"子元素"赋予自由伸缩的能力*/ -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; width: 0%; } /*垂直居中*/ .flex-centerbox{ width: 100%; height: 200px; background: #fafafa; /*子元素沿主轴对齐方式居中*/ -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; /*子元素沿侧轴对齐方式垂直居中*/ -webkit-box-align: center; -webkit-align-items: center; align-items: center; border-top:1px solid #ddd; border-bottom: 1px solid #ddd; padding:10px 0; margin:10px 0; } .center-cont{ display: block; background: #ddd; text-align: center; padding:20px; margin:10px; }
以上是关于用flex做垂直居中的主要内容,如果未能解决你的问题,请参考以下文章