图片居中在很多地方需要用到，水平居中很好实现，垂直居中有点麻烦，这段时间在项目中遇到了好几处这样的问题，分享给大家。
###需求一：未知图片大小，使图片在高度固定的区域内垂直居中
大家都习惯在应该是图片垂直居中的地方先设置图片父元素的行高1
2
3
4
5
6
7
8
9
10
11
12```css
.wrapper{
background: #cc8548;
margin: 40px auto;
width: 500px;
height: 300px;
line-height: 300px;
text-align: center;
}
.img{
vertical-align: middle;
}
1 | <div class="wrapper"> |
其效果如下：
是不是看着这样就垂直居中了？
其实并没有居中，只是因为上下差别太小不好看出而已，我们把父元素的高度缩小一下就很明显了：1
2
3
4
5
6
7
8
9
10
11.wrapper{
background: #cc8548;
margin: 40px auto;
width: 500px;
height: 200px;
line-height: 200px;
text-align: center;
}
.img{
vertical-align: middle;
}
对于1
2
3
4
5
6
7>vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
继承性: 无
百分数: 相对于元素的行高line-height
[注意]IE7-浏览器中vertical-align的百分比值不支持小数行高，且取baseline、middle、text-bottom等值时与标准浏览器在展示效果不一样，常用的解决办法是将行内元素设置display:inline-block
vertical-align:baseline(元素的基线与父元素的基线对齐)
vertical-align:sub(降低元素的基线到父元素合适的下标位置)
vertical-align:super(升高元素的基线到父元素合适的上标位置)
vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)
vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)
vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)
vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)
vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)
vertical-align:(+-n)px(元素相对于基线上下偏移npx)
vertical-align:x%(相对于元素的line-height值)
vertical-align:inherit(从父元素继承vertical-align属性的值)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17由此可见，``` vertical-align: middle; ```属性的作用并不是将子元素的垂直中点和父元素的垂直中点对齐，而是元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐。
对于**元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐**，可参考下图：
基线并不是汉字文字的下端沿，而是英文字母“x”的下端沿。但是字符X在父元素中并不是垂直居中的，且各个字体的字符X的高低位置不一致。所以，当字体大小较大时，这种差异就更明显。而当字体大小为0时，基线的位置就等于中线的位置，我们通过设置父元素的```font-size:0```来使图片达到完成垂直居中的效果：
```css
.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布局来解决图文混排的问题，其代码如下：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.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;
}
1 | <div class="wrapper"> |
over~ QAQ