頁面佈局中，經常會使用到文字居中、圖片居中的效果，雖然很簡單，但對一些初學者或者樣式佈局比較薄弱的開發人員來說，還是比較困難的，這裡講講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>