我一直在尝试解决如何仅使用 css 在 div 中将超大图像居中。
我们使用的是流体布局，因此图像容器的宽度会随着页面宽度的变化而变化（div 的高度是固定的）。图像位于一个 div 中，带有一个嵌入的 boxshadow 值，以便看起来好像您正在浏览图像的页面。
图像本身的大小已被调整为以尽可能宽的值填充周围的 div（设计有一个max-width值）。
如果图像小于周围的 div，这很容易做到：
margin-left: auto;
margin-right: auto;
display: block;
但是当图像大于 div 时，它只是从左边缘开始，并且偏离中心到右侧（我们使用的是overflow: hidden）。
我们可以指定一个width=100%，但是浏览器在调整图像大小方面做得很糟糕，并且网页设计以高质量图像为中心。
关于使图像居中以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;
}
这是一个旧的 Q，但是没有 flexbox 或绝对位置的现代解决方案就是这样工作的。
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是相对于宽度计算的。
浏览器兼容性应该没问题： https ://caniuse.com/#feat=transforms2d
在 div 中放置一个大 div，将其居中，并将图像居中放在该 div 中。
这将其水平居中：
HTML：
<div class="imageContainer">
<div class="imageCenterer">
<img src="http://placekitten.com/200/200" />
</div>
</div>
CSS：
.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，但您需要图像的高度才能将其绝对放置在其中。
游戏迟到了，但我发现这种方法非常直观。 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>
我非常喜欢将图像作为 div/node 的背景——那么background-position: center无论屏幕大小如何，您都可以使用该属性将其居中
将一些弹性和溢出设置为隐藏很简单。
<!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>
您可以使用的一个选项是object-fit: cover它的行为有点像background-size: cover. 更多关于对象拟合。
忽略下面的所有JS，这只是为了演示。
这里的关键是您需要在包装器中设置图像并为其提供以下属性。
.wrapper img {
height: 100%;
width: 100%;
object-fit: cover;
}
我在下面创建了一个演示，您可以在其中更改包装器的高度/宽度并查看效果。图像将始终垂直和水平居中。它将占据其父级宽度和高度的 100%，并且不会被拉伸/压扁。这意味着图像的纵横比保持不变。通过放大/缩小来应用更改。
唯一的缺点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>以@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;
宽度和高度仅作为示例：
parentDiv{
width: 100px;
height: 100px;
position:relative;
}
innerDiv{
width: 200px;
height: 200px;
position:absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
如果您的父 div 的左侧和顶部不是屏幕窗口的顶部和左侧，它必须为您工作。这个对我有用。
我发现这是一个更优雅的解决方案，没有 flex：
.wrapper {
overflow: hidden;
}
.wrapper img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* height: 100%; */ /* optional */
}
基于@Guffa的回答
，因为我失去了2个多小时来居中一个非常宽的图像，
对我来说，图像尺寸为2500x100px，视口为1600x1200或全高清1900x1200的工作方式如下：
.imageContainer {
height: 100px;
overflow: hidden;
position: relative;
}
.imageCenter {
width: auto;
position: absolute;
left: -10%;
top: 0;
margin-left: -500px;
}
.imageCenter img {
display: block;
margin: 0 auto;
}
我希望这可以帮助其他人更快地完成任务:)