position:absolute的DIV里面的img怎么垂直居中

Question

一个position:absolute的DIV里面的img怎么垂直居中
img宽度高度是自适应的

Answer 1

1. vertical-align

div{
    height: 500px;
    line-height: 500px;
}

img{
    vertical-align: middle;
}

2.transform: translateY(-50%)

img{
    postion: relative;
    top: 50%;
    transform: translateY(-50%);
}

3.flex

div{
    display: flex;
    align-items: center;
}

Answer 2

推荐下面这个，详细讲解了css的居中，包括行内元素、块级元素的水平和垂直居中。
https://claiyre.github.io/201...