display:table-cell的强大功能

display:table-cell可以用来：

• 图片垂直居中于元素
• 等高布局
• 自动平均划分元素，并在一行显示

/*图片垂直居中*/
/*父元素*/
{
  display:table-cell;
  vertical-align:middle;
}
/*子元素*/
{
  vertical-align:middle;
}

/*等高布局*/
<div>
      <div style="background-color:blue;display:table-cell;">
        我是蓝色块
      </div>
      <div style="background-color:yellow;display:table-cell;">
        我是黄色块
        我是黄色块
      </div>
</div>

/*自动平均划分元素*/
/*父元素*/
{
  display:table;
}
/*子元素*/
{
 display:table-cell;
}

如果本文对您有帮助，请给我点赞哦~ 谢谢~