CSS圖片大小不固定的居中方法

CSS是前端開發必不可少的一門語言，本文主要介紹了CSS居中實例之大小不固定的圖片居中方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

1.利用table-cell實作垂直居中

<p class="box1">
    [站外图片上传中……(5)]
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

利用父元素為display:table-cell類型實作垂直居中，table在ie8+的瀏覽器中自帶的垂直居中的屬性。  

注意：img{vertical-align: middle;}只是為了消除display:inline-block類型的基線對齊問題。

2.多行文字的垂直居中方法

 有時可能我們會遇到需要多行文字垂直居中的一些情況，但是做起來有時有些麻煩，需要我們換個想法實現。

<p class="box3">
    <span>你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据</span>
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

將內部的文字用span標籤（其他標籤也可以）包裹起來，把span標籤設為inline-block ,然後當圖片的垂直居中處理(ie8+)。

相關推薦：

CSS實作圖片居中的三種方式

HTML程式碼怎麼實作文字和圖片居中？

怎麼讓css圖片居中顯示

#

以上是CSS圖片大小不固定的居中方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！