display:flex分布布局及垂直居中（二）

 

先了解下上下垂直居中实现方式

第一种方式：

<div class="box">
  上下垂直居中
</div>

.box{
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

===========================

第二种方式：

table和.cell都将撑满页面，cell的子元素水平垂直居中

<div class="table">
  <p class="cell">居中上下</p>
</div>

.table{
  border: 1px solid #ccc;
  display: table;
  width: 100%;
  height: 50px;
}
.cell{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

在上边示例中使用flex

<ul>
  <li> <img src="ico_foot_ax_active.png">分类1 </li>
  <li><span>分类2</span></li>
  <li><span>分类3</span></li>
</ul>

ul,li{list-style: none;}
    ul{
      display: flex;
    }
    li{
      display: flex;
      flex: 1;
      border: 1px solid #fff;
      height: 50px;

      align-items: center;
      justify-content: center;
      background: #ccc;
    }