圖片居中在很多地方需要用到，水平居中很好實(shí)現(xiàn)，垂直居中有點(diǎn)麻煩，這段時(shí)間在項(xiàng)目中遇到了好幾處這樣的問題婉刀，分享給大家律秃。
需求一：未知圖片大小柜裸，使圖片在高度固定的區(qū)域內(nèi)垂直居中
大家都習(xí)慣在應(yīng)該是圖片垂直居中的地方先設(shè)置圖片父元素的行高line-height等于其高度height蔬崩，然后對(duì)圖片設(shè)置vertical-align:middle來達(dá)到這種效果。首先我們先來看下這種方式的效果：
.wrapper{
background: #cc8548;
margin: 40px auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
}
.img{
vertical-align: middle;
}
<div class="wrapper">
<img class="img" src="img1.jpg">
</div>
其效果如下：
是不是看著這樣就垂直居中了？
其實(shí)并沒有居中，只是因?yàn)樯舷虏顒e太小不好看出而已挡育，我們把父元素的高度縮小一下就很明顯了：
.wrapper{
background: #cc8548;
margin: 40px auto;
width: 500px;
height: 200px;
line-height: 200px;
text-align: center;
}
.img{
vertical-align: middle;
}
對(duì)于
vertical-align這個(gè)屬性，W3C給出的說明是：
vertical-align用來設(shè)置垂直對(duì)齊方式，所有垂直對(duì)齊的元素都會(huì)影響行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
應(yīng)用于: 行內(nèi)元素、替換元素、表單元格
繼承性: 無
百分?jǐn)?shù): 相對(duì)于元素的行高line-height
[注意]IE7-瀏覽器中vertical-align的百分比值不支持小數(shù)行高矛绘，且取baseline喧锦、middle、text-bottom等值時(shí)與標(biāo)準(zhǔn)瀏覽器在展示效果不一樣，常用的解決辦法是將行內(nèi)元素設(shè)置display:inline-block
vertical-align:baseline(元素的基線與父元素的基線對(duì)齊)
vertical-align:sub(降低元素的基線到父元素合適的下標(biāo)位置)
vertical-align:super(升高元素的基線到父元素合適的上標(biāo)位置)
vertical-align:bottom(把對(duì)齊的子元素的底端與行框底端對(duì)齊)
vertical-align:text-bottom(把元素的底端與父元素內(nèi)容區(qū)域的底端對(duì)齊)
vertical-align:top(把對(duì)齊的子元素的頂端與行框頂端對(duì)齊)
vertical-align:text-top(把元素的頂端與父元素內(nèi)容區(qū)域的頂端對(duì)齊)
vertical-align:middle(元素的中垂點(diǎn)與父元素的基線加1/2父元素中字母X的高度對(duì)齊)
vertical-align:(+-n)px(元素相對(duì)于基線上下偏移npx)
vertical-align:x%(相對(duì)于元素的line-height值)
vertical-align:inherit(從父元素繼承vertical-align屬性的值)
由此可見罩锐，vertical-align: middle;屬性的作用并不是將子元素的垂直中點(diǎn)和父元素的垂直中點(diǎn)對(duì)齊熬的，而是元素的中垂點(diǎn)與父元素的基線加1/2父元素中字母X的高度對(duì)齊。
對(duì)于元素的中垂點(diǎn)與父元素的基線加1/2父元素中字母X的高度對(duì)齊，可參考下圖：
基線并不是漢字文字的下端沿，而是英文字母“x”的下端沿忘伞。但是字符X在父元素中并不是垂直居中的斋射，且各個(gè)字體的字符X的高低位置不一致桑包。所以窄陡，當(dāng)字體大小較大時(shí)乘综，這種差異就更明顯萌朱。而當(dāng)字體大小為0時(shí)，基線的位置就等于中線的位置锄弱，我們通過設(shè)置父元素的
font-size:0來使圖片達(dá)到完成垂直居中的效果：
.wrapper{
background: #cc8548;
margin: 40px auto;
width: 500px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 0;
}
.img{
vertical-align: middle;
}
需求二：圖文混排赎瞎，使圖片在未知高度的div中垂直居中
使用場景大概是圖文混排，左邊是圖片，右邊為文字熟史，文字多少未知怒详，圖片垂直居中。
這里使用flex布局來解決圖文混排的問題蛾洛，其代碼如下：
.wrapper{
background: #cc8548;
margin: 40px auto;
padding: 20px;
width: 500px;
display: flex;
flex-direction: row;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
font-size: 0;
}
.img{
vertical-align: middle;
align-items: center;
}
.text{
flex: 1;
padding-left: 50px;
font-size: 20px;
}
<div class="wrapper">
<img class="img" src="img1.jpg">
<div class="text">
富強(qiáng)民主文明和諧，自由平等公正法制，愛國敬業(yè)誠信友善趁餐。
富強(qiáng)民主文明和諧，自由平等公正法制篮绰，愛國敬業(yè)誠信友善后雷。
富強(qiáng)民主文明和諧，自由平等公正法制吠各，愛國敬業(yè)誠信友善臀突。
富強(qiáng)民主文明和諧，自由平等公正法制贾漏，愛國敬業(yè)誠信友善候学。
富強(qiáng)民主文明和諧，自由平等公正法制纵散，愛國敬業(yè)誠信友善梳码。
富強(qiáng)民主文明和諧隐圾，自由平等公正法制，愛國敬業(yè)誠信友善边翁。
富強(qiáng)民主文明和諧翎承，自由平等公正法制，愛國敬業(yè)誠信友善符匾。
富強(qiáng)民主文明和諧叨咖，自由平等公正法制，愛國敬業(yè)誠信友善啊胶。
</div>
</div>
over~ QAQ
