用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做垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

关于flex布局垂直居中

flex align-items center 不居中

如何垂直对齐一个flex元素子元素[重复]

使用弹性布局来解决令人烦恼的垂直居中问题~~

使用flex时垂直居中[重复]

React Native 中的 Flex Box 的用法(水平布局垂直布局水平居中垂直居中居中布局)