在html编程中常遇到要求的图片剧中的情况、一般是banner为最为常用的。下面总结两个方法用于banner居中，这里的居中是大图片（通常是通屏或者图片大于浏览器宽度）居中！

方法一

通过设置背景图的方式进行居中background:url('xxx/xxx.png') center;

<div class="swiper-container tg-banner">
    <div class="swiper-wrapper">
    <div class="swiper-slide">
        <a href="javascript:void(0);"  style="width: 100%;height:400px;background: url('/Public/home/index/bdtj/image/1.jpg') center;"></a>        
</div>
    <div class="swiper-slide">
        <a href="javascript:void(0);"  style="width: 100%;height:400px;background: url('/Public/home/index/bdtj/image/2.jpg') center;"></a>        
</div>
    <div class="swiper-slide">
        <a href="javascript:void(0);"  style="width: 100%;height:400px;background: url('/Public/home/index/bdtj/image/3.jpg') center;"></a>
</div>
</div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

方法二

设置图片为绝对定位、进行居中

<div class="swiper-slide" style="position: relative;width: 100%;">
    <a href="javascript:;" style="display: block;width: 100%;overflow: hidden;height: 400px;">
        <img src="public/image/banner1.jpg"  alt="" style="position: absolute;left:50%;margin-left:-960px;"/>
    </a>
</div>

js代码

var swiper1 = new Swiper('.swiper-container.index-banner', {
    pagination: '.swiper-pagination',
    autoplayDisableOnInteraction : false,
    paginationClickable :true,
    slidesPerView: 1,
    autoplay: 2500,
    loop: true,
    effect: 'fade',
    centeredSlides: true,
    paginationType : 'custom',
    paginationCustomRender: function (swiper, current, total) {
        $(".span-custom").removeClass('pagination-active');
        var active=$(".span-custom")[current-1];
        $(active).addClass('pagination-active');
    }
});