js 如何实现banner一屏显示的情况下上下居中？

Question

项目中banner是一屏显示（不管多大的屏幕就是一整屏显示），本来通过background-img写，然后background-position:center center.就好了，但是要求必须把banner图放到img容器中，怎样设置这个img在swiper中上下左右居中（一屏情况下）。

Answer 1

方法一：

html,body, .swiper-container{height:100%;}

方法二：

html,body .swiper-container{
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    flex:1;
}

Answer 2

1、兼容IE10+
flex布局，具体用法百度或者google（根据评论里的前辈提醒，把百度补充进来）

2、兼容IE8

.father {
    position: relative;
}
img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}