Bobscript

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

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

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

图片居中演示

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

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

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

解决的方法有三种：

方法一：

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

<style>
.banner{
    background: url(banner.jpg) center top no-repeat;
    height:200px;
}
</style>
<div class="banner"></div>

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

方法二：

<style>
.banner{
    overflow: hidden;
    position: relative;
}
.banner img{
    position: absolute;
    left: 50%;
    margin-left: -640px;
}
</style>
<div class="banner">
    <img src="banner.jpg">
</div>

方法三：

<style>
.banner{
    overflow: hidden;
    position: relative;
}
.banner img{
    position: relative;
    left: 50%;
    margin-left: -640px;
}
</style>
<div class="banner">
    <img src="banner.jpg">
</div>

修正之后的：

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

##总结：

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