我一直在尝试使用仅CSS来使一个超大的图片在div内居中。
我们使用的是流式布局，因此图像容器的宽度会随着页面宽度的变化而变化（div的高度固定）。图像位于一个带有内部阴影的div中，使其看起来像是你正在透过页面查看图片。
图像本身已被调整大小以填充周围div的最大可能值（设计中具有max-width值）。
如果图像小于周围的div，则很容易做到：
margin-left: auto;
margin-right: auto;
display: block;
但是，当图像比 div 更大时，它只是从左边缘开始，并向右偏移（我们使用 overflow: hidden）。
我们可以分配一个 width=100%，但浏览器在调整图像大小方面做得很差，而 Web 设计的中心在于高质量的图像。
有什么想法可以让图像居中，以便 overflow:hidden 均匀地截断两侧？
尝试类似于这样的代码。它可以将任何巨大的元素在父容器中纵向和横向居中，无论它们的大小如何。
.parent {
position: relative;
overflow: hidden;
//optionally set height and width, it will depend on the rest of the styling used
}
.child {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
-100% 的问题 ^^. 另外，如果你在图片标签中添加 min-width 和 min-height 属性，并将它们的值设为 100%，你基本上就能得到一个 background-size: cover; 的效果 -> jsfiddle。 - Simon这是一个旧的问题，但是一个现代的（截至2016年）没有使用弹性盒子或绝对定位的解决方案如下所示。
margin-left: 50%;
transform: translateX(-50%);
.outer {
border: 1px solid green;
margin: 20px auto;
width: 20%;
padding: 10px 0;
/* overflow: hidden; */
}
.inner {
width: 150%;
background-color: gold;
/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;
/* Move to the left by 50% of own width */
transform: translateX(-50%);
}<div class="outer">
<div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>为什么它起作用？
乍一看，似乎我们先向右移动50％，然后再向左移动50％。 这将导致零移位，那又怎样？
但是这50％并不相同，因为上下文很重要。 如果您使用相对单位，边距将被计算为父元素宽度的百分比，而变换将相对于同一个元素的50％。
在添加CSS之前，我们有这种情况。
+---------------------------+
| Parent element P of E |
| |
+-----------------------------------------+
| Element E |
+-----------------------------------------+
| |
+---------------------------+
通过添加样式 margin-left: 50% 我们得到
+---------------------------+
| Parent element P of E |
| |
| +-----------------------------------------+
| | Element E |
| +-----------------------------------------+
| | |
+-------------|-------------+
|>>>>> a >>>>>|
a is 50% width of P
而transform: translateX(-50%)则向左移回
+---------------------------+
| Parent element P of E |
| |
+-----------------------------------------+
| Element E | |
+-----------------------------------------+
|<<<<<<<<< b <<<<<<<| |
| | |
+------------|--------------+
|>>>>> a >>>>|
a is 50% width of P
b is 50% width of E
margin-left 和 margin-right，而且 margin-top 和 margin-bottom 都是根据宽度计算的。margin-top: 50% 将是__宽度__的50%，而不是所需的高度。 - yunzen-webkit-transform: translateX(-50%);）。 - Nick Schneble<div class="imageContainer">
<div class="imageCenterer">
<img src="http://placekitten.com/200/200" />
</div>
</div>
.imageContainer {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.imageCenterer {
width: 1000px;
position: absolute;
left: 50%;
top: 0;
margin-left: -500px;
}
.imageCenterer img {
display: block;
margin: 0 auto;
}
示例：http://jsfiddle.net/Guffa/L9BnL/
为了使其垂直居中，您可以对内部div使用相同的方法，但需要使用图像的高度来将其绝对定位在内部。
width设置，它将成为父级的宽度，并且即使页面比图像更窄，图像也会居中，即左侧边缘和右侧边缘的一样多将被隐藏：http://jsfiddle.net/Guffa/L9BnL/2/ - Guffa虽然我有些晚了，但我发现这种方法非常直观。 https://codepen.io/adamchenwei/pen/BRNxJr
CSS
.imageContainer {
border: 1px black solid;
width: 450px;
height: 200px;
overflow: hidden;
}
.imageHolder {
border: 1px red dotted;
height: 100%;
display:flex;
align-items: center;
}
.imageItself {
height: auto;
width: 100%;
align-self: center;
}
HTML
<div class="imageContainer">
<div class="imageHolder">
<img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
</div>
</div>
display: flex，并在图像上使用 align-self: center。这是一个优化后的版本：https://codepen.io/anon/pen/dWKyey - caiosm1005通过设置一些灵活性和隐藏溢出，这很简单。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div {
height: 150px;
width: 150px;
border: 2px solid red;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div>
<img src="sun.jpg" alt="">
</div>
</body>
</html>
我非常喜欢将一张图片作为一个div/node的背景。这样，你就可以使用background-position: center属性来使其在任何屏幕大小下居中。
max-width:100%;
max-height:100%;
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
在 @yunzen 的优秀回答基础上进行改进:
我猜想很多搜索这个话题的人都试图将一张大图片作为“英雄”背景图，例如在首页上。在这种情况下，他们通常希望文字出现在图片上，并且在移动设备上可以缩放。
这是完美的 CSS 代码用于此类背景图（将其用于 <img> 标签）：
/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;
/* Move to the left by 50% of own width */
transform: translateX(-50%);
/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;
/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;
/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;
/* OPTIONAL - try with/without based on your needs */
top: 0;
/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;
您可以使用的一种选项是object-fit: cover，它的行为有点像background-size: cover。更多信息请参见object-fit。
忽略下面所有的JS，那只是用于演示的。
关键在于您需要在包装器内设置图像并给它以下属性。
.wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
}
object-fit 在IE11上无法使用。
// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');
const resizeWrapper = () => {
wrapper.style.width = widthInput.value + "px";
wrapper.style.height = heightInput.value + "px";
}
button.addEventListener("click", resizeWrapper);.wrapper {
overflow: hidden;
max-width: 100%;
margin-bottom: 2em;
border: 1px solid red;
}
.wrapper img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}<div class="wrapper">
<img src="https://i.imgur.com/DrzMS8i.png">
</div>
<!-- demo only -->
<lable for="width">
Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>