上一篇CSS居中問題探索中，通過實例的方式展示了一下text-align:center、margin:0 auto;淫半、line-height: boxHeight、position和margin或者transform配合使用還有display:table-cell來實現(xiàn)水平居中或者垂直居中的方式方法匣砖，本篇主要補充三個垂直水平居中的實例科吭，或者更直接的說是大小不固定的圖片垂直水平居中實現(xiàn)的兩種方式和多行文本的垂直居中的方法昏滴。
相對于實現(xiàn)水平居中，垂直居中比較麻煩对人，所以接下來的以垂直居中為重點谣殊，水平居中，可以在代碼中自己看看實現(xiàn)牺弄。
大小不固定的圖片垂直水平居中
在商品展示性的網(wǎng)站姻几，特別是電商網(wǎng)站，這種需求特別多势告，比如：
從上圖可以看出蛇捌，這些商品的大小是不固定的，所以要求所有圖片都要垂直水平居中咱台，這時候我們的需求就來了（PS:其實京東這些圖片都是固定大小的络拌，嘿嘿）。
利用table-cell實現(xiàn)垂直居中
<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類型實現(xiàn)垂直居中吵护，table在ie8+的瀏覽器中自帶的垂直居中的屬性盒音。
注意：img{vertical-align: middle;}只是為了消除display:inline-block類型的基線對齊問題。
利用添加兄弟元素實現(xiàn)垂直居中
<div class="box2">
<i></i>
[站外圖片上傳中……(6)]
</div>
div{
width: 500px;
height: 500px;
background: #ccc;
}
.box2{
text-align:center;
}
i{
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
img{
vertical-align: middle;
}
利用給img添加兄弟元素馅而，重新設(shè)置基線的位置祥诽。
多行文本的垂直居中方法
有時可能我們會遇到需要多行文本垂直居中的一些情況，但是做起來有時有些麻煩瓮恭，需要我們換個思路去實現(xiàn)雄坪。
<div class="box3">
<span>你好，我是測試數(shù)據(jù)你好屯蹦，我是測試數(shù)據(jù)你好维哈，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好登澜，我是測試數(shù)據(jù)你好阔挠，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好脑蠕，我是測試數(shù)據(jù)你好购撼，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好谴仙，我是測試數(shù)據(jù)你好迂求，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好晃跺，我是測試數(shù)據(jù)你好揩局，我是測試數(shù)據(jù)你好，我是測試數(shù)據(jù)你好掀虎，我是測試數(shù)據(jù)你好凌盯，我是測試數(shù)據(jù)</span>
</div>
div{
width: 500px;
height: 500px;
background: #ccc;
}
.box3{
display: table-cell;
vertical-align: middle;
}
span{
display: inline-block;
vertical-align: middle;
}
將內(nèi)部的文本用span標簽（其他標簽也可以）包裹起來付枫，把span標簽設(shè)為inline-block,然后當(dāng)圖片的垂直居中處理(ie8+)。
小結(jié)
本文也是從以前的學(xué)習(xí)筆記中翻出來整理的一個css基礎(chǔ)小點十气， 在這里記錄一下励背，免得每次遇到問題總是翻筆記。
