div上下垂直居中,弹性盒子align-items:center

时间:2020-9-13 作者:admin

举例代码

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

div上下垂直居中,弹性盒子align-items:center

DIV需要上下垂直居中,可直接用css3里的display: flex、align-items:center实现。

.box{
    display: flex;
    align-items: center;
    width: 200px;
    height: 200px;
    background: #c00;
    margin: 100px auto;
}

也可以用flex: 1平均分配子盒子

.box div{
    margin: 0 2px;
    background: #000;
    padding: 10px;
    flex: 1;
}
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。