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

举例代码

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

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;
}