css中display的table和table-cell简单使用

页面布局中，经常会使用到文字居中、图片居中的效果，虽然很简单，但对一些初学者或者样式布局比较薄弱的开发人员来说，还是比较困难的，这里讲讲display: table  和 display: table-cell怎样使图片和文字居中吧。

1、图片居中：

html代码：

<div class="img-wrap">
  <img class="img-content" src="../assets/img/home/advantage.png" alt="">
  <div class="title">高效办公</div>
  <div class="content">
    <p>移动端与PC端联动，随时随地</p>
    <p>办公；及时了解货物中转状态，</p>
    <p>清晰的财务报表，让办公更高效</p>
  </div>
</div>

css代码：

.img-content {
  display: table-cell; //变成块级表格元素
  vertical-align: middle;
  margin: 0 auto;
}

 这样图片就能居中啦！

2、文字居中

如何让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者flex布局。但这里我介绍display：table和table-cell是如何让多行文字垂直居中的。

html代码：

<div class="p">
    <p class="s">
        轻轻的我走了，正如我轻轻地来，我轻轻的招手，不带走一片云彩。
        轻轻的我走了，正如我轻轻地来，我轻轻的招手，不带走一片云彩。
        轻轻的我走了，正轻轻的我走了，正如我轻轻地来，我轻轻的招手，
        不带走一片云彩。
    </p>
</div>

css代码：

<style>
    .p {
        display: table;
        width: 500px;
        height: 500px;
        text-align: center;
    }
    .s  {
        display: table-cell;
        height: 300px;
        line-height: 30px;
        background-color: blueviolet;
        vertical-align: middle;
        color: #fff;
    }
</style>