CSS实现大于父元素宽度的图片居中

通常在Banner的时候需要居中,而且Banner通常都是比较宽的。如果当前页面比Banner宽,那么text-align:center即可。

图片居中演示

不过当页面缩小的时候,图片的左边就会抵住窗口左边,不会随着窗口的缩小而左移。

DEMO演示:当父元素小于图片宽度的时候 图片不居中

上面的演示大家可以改变窗口来看。

解决的方法有三种:

方法一:

这个是最先想到的,就是把图片作为背景来设置到Banner上面。

.banner{
  background: url(banner.jpg) center top no-repeat;
  height:200px;
}

<div class="banner"></div>

优点:便签少
缺点:需要手动设定Banner的高度

方法二:

.banner{
    overflow: hidden;
    position: relative;
}
.banner img{
    position: absolute;
    left: 50%;
    margin-left: -640px;
}

<div class="banner">
    <img src="banner.jpg">
</div>

方法三:

.banner{
    overflow: hidden;
    position: relative;
}
.banner img{
    position: relative;
    left: 50%;
    margin-left: -640px;
}

<div class="banner">
    <img src="banner.jpg">
</div>

修正之后的:

上面三种方法的DEMO演示:超过父元素依然居中的图片

总结:

方法二和三的原理类似,就是用先偏离父元素宽度的50%,这时候图片的左边缘到达了父元素的中间,然后通过负的margin值把图片拉到中心,值是图片宽度的一半,这样图片的中轴线就和父元素的中心线重合了,达到了居中的效果,而父元素的overflow:hidden超出隐藏,保证了不会出现横向的水平滚动条。

标签: 图片居中, css, 超过宽度

已有 2 条评论

  1. Bill Bill

    之前也一直是用的你这个方法,不过发现一个问题:如果把浏览器窗口变窄,然后刷新页面,banner会相对于窄的页面居中,再把浏览器变宽,banner右侧就会出现空白,因为浏览器宽度不同的时候,50%的定位距离不一样,请问这种情况你有好的解决办法吗?

    1. Bob Bob

      这里有三种方法,你指的是哪一种?浏览器版本是?

添加新评论