巧用vertical-align实现垂直居中 | soHappy

先来看看vertical-align的语法:

语法:
vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默认值:baseline
适用于:内联及 table-cell 元素
继承性:无
动画性:当值为 <length>
计算值:指定值

利用伪元素做”中介”

再看需求:一个父容器高度不确定,且计算值为非auto的的值,一个内联元素也不确定高度,要求这个内联元素相对父容器垂直居中。
用css的实现方法:

一个不确定高度的img为例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent {
height: 100%;
}

.parent::after {
display: inline-block
;

visibility: hidden;
width: 0;
height: 100%;
vertical-align: middle;
overflow: hidden;
content: '.';
}
img {
vertical-align: middle;
}

其实利用了父容器的::after这个伪元素来作为中介,它继承父容器的高度,它又是相对img元素的内联元素,img相对它来垂直居中就是间接的相对了父容器垂直居中。当然除了middle其他的对齐方式可以这样应用。