如果图像宽于容器，我该如何居中放置图像？
通常情况下，您将图像置于display: block; margin: auto display: block; margin: auto ，但是如果图像大于容器，则会溢出到右侧。 我如何使它平等地溢出到双方？ 容器的宽度是固定的和已知的。 图像的宽度是未知的。
HTML
<div class="image-container"> <img src="http://www.google.comhttp://img.dovov.comlogo.gif" height="100" /> </div>
CSS
.image-container { width: 150px; border: solid 1px red; margin:100px; } .image-container img { border: solid 1px green; }
jQuery的
$(".image-container>img").each(function(i, img) { $(img).css({ position: "relative", left: ($(img).parent().width() - $(img).width()) / 2 }); });
在jsFiddle上查看： http : //jsfiddle.net/4eYX9/30/
一个纯粹的CSS解决scheme
需要一个额外的包装（在FireFox，IE8，IE7testing）：
改进的答案
原来的答案有问题（下面）。 如果图像大于outer以自动边距为中心的容器，则会截断左侧的图像，并在右侧创build多余的空间， 如此小提琴所示 。
我们可以通过漂移inner权利，然后从右边的中心来解决这个问题。 这仍然会截断页面左侧的img ，但是通过明确地将其推向左边，然后居中放置，这样可以防止右侧多余的水平滚动。 现在我们只需要按照正确的方式滚动，就可以看到图像的正确部分。
小提琴示例 （小提琴中的边框仅用于演示。）
基本的CSS
div.outer { width: 300px; /* some width amount needed */ margin: 0 auto; overflow: visible; } div.inner { position:relative; float: right; /* this was added and display removed */ right: 50%; } div.inner img { position: relative; right:-50%; /* this was changed from "left" in original */ }
如果你没有权利滚动广泛的图像
然后使用上面，也设置任何元素包装outer （ 像body或第三个包装 ）有overflow: hidden 。
原创理念（历史）
小提琴示例 （小提琴中的边框仅用于演示。）
HTML
<div class="outer"> <div class="inner"> <img src="/yourimage.png"> </div> </div>
CSS
div.outer { width: 300px; /* some width amount needed */ margin: 0 auto; overflow: visible; } div.inner { display: inline-block; position:relative; right: -50%; } div.inner img { position: relative; left:-50%; }
这是一个2行的CSS解决scheme（跨浏览器支持可能需要多行）：
img { margin-left: 50%; transform: translateX(-50%); }
另一种纯粹的CSS解决scheme是使用transform属性：
HTML：
<div class="outer"> <img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" /> </div>
CSS：
.outer { position: relative; width: 100px; border: 1px solid black; height: 150px; margin-left: 100px; /* for demo */ /* overflow: hidden; */ } img.image { width: 200px; opacity: 0.7; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
小提琴
只要添加一个overflow:hidden到父div来隐藏图像的额外区域。
您最好的select是将其设置为容器的背景图像 。
#container { background: url('url/to/image.gif') no-repeat center top; }
事实上，有一个简单的纯CSS / HTML的方式（没有大的水平滚动）：
Html ：
<div class="outer"> <img src="/my/sample/image.jpg"> </div>
Css ：
如果你不想看到图像溢出
div.outer img { position: absolute; left: -50%; z-index:-1; } div.outer { overflow: hidden; position: relative; height: 200px; }
与图像溢出可见
div.outer img { position: absolute; left: -50%; z-index:-1; } div.outer { overflow: visible; position: relative; height: 200px; } body, html { overflow-x:hidden; }
可以看到图像溢出的背景解决scheme：
Html ：
<div class="outer"> <div class="inner"></div> </div>
Css ：
div.outer { width: 100%; height: 200px; } div.inner { background: url('/assets/layout/bg.jpg') center no-repeat; position: absolute; left: 0; width: 100%; height: inherit; }
假设外层是在一个宽度指定的容器中。
我只能想到一个Javascript解决scheme，因为你需要做的是相对定位图像的负数左边的容器：
jQuery的
$(document).ready(function(){ var theImg = $('#container img'); var theContainer = $('#container'); if(theImg.width() > theContainer.width()){ theImg.css({ position: 'relative', left: (theContainer.width() - theImg.width()) / 2 }) } })
我不认为有一个纯粹的CSS解决scheme（除了下一个答案:)）。 然而，使用Javascript，它只是一个find图像的宽度，减去容器的宽度，除以二，你有多远，你需要的容器的左边。
我发现这是一个更优雅的解决scheme，没有flex，类似于上面的东西，但更广义的（适用于垂直和水平）：
.wrapper { overflow: hidden; } .wrapper img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* height: 100%; */ /* optional */ }
