本文介紹了CSS居中實例之大小不固定的圖片居中方法，分享給大家，具體如下：
1.利用table-cell實現垂直居中
<div class="box1"> [站外圖片上傳中……(5)]</div>
div{ 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.多行文本的垂直居中方法
有時可能我們會遇到需要多行文本垂直居中的一些情況，但是做起來有時有些麻煩，需要我們換個思路去實現。
<div class="box3"> <span>你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據你好，我是測試數據</span></div>
div{ 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+)。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
