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+)。