未知高度的图片垂直居中问题？

Question

如何设置一张图片在浏览器中垂直居中， 当图片超出屏幕时上下可滚动

 <div class="file-wrapper">
       <img class="file-position" src="1.jpg" alt="">
 </div>

.file-wrapper{
        width: 100%;
        height: 100%;
        background: #0e0e0e;
        position: relative;
    }
.file-position{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

现在能垂直居中 但是图片过大的时候会截取 不能自动上下滚动

Answer 1

给wrapper加个overflow:auto不就行咯：

.file-wrapper{
    ...
    overflow: auto;
}

Answer 2

给父级加 相对定对，
图片就下面的样式
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

Answer 3

flex

Answer 4

.file-wrapper {
    displaye: flex;
    justify: center;
    align-items: center;
}

Answer 5

方案：
1、图片使用flex布局
2、给图片添加onload事件，图片加载成功后计算图片高度，判断是否大于外围容器高度，如果大于，去除display: flex;