如何使用CSS将动态大小的div集中在动态大小的容器中

Question

我有一个3级结构：

<div class="workingArea">
 <div class="imageContainer">
  <img class="theImage" />
 </div>
</div>

"workingArea"的大小由浏览器的大小决定（在父级中使用flex）。"imageContainer"的大小由加载的图像的大小决定（取决于图像，每个图像都有不同的大小）。

我想将图像容器放在工作区域的中心。

有一个问题：因为"imageContainer"的大小是由图像决定的，它可以大于工作区域的大小，在这种情况下，我希望图像的中心位于工作区域的中心（图像应该向左和向右溢出）。

我试过使用flex，但它只能垂直居中，而不能垂直和水平居中。

JSFiddle 中的问题模拟

谢谢！

Answer 1

最简单的解决方案是将图像用作背景图像，并将其定位为中心。尽管我完全支持好的语义代码，但如果我是你，我会这么做的。这种方式意味着您不需要imageContainers或任何东西。代码将如下所示：

<div class="working_area" style="background: yellow url('http://eofdreams.com/data_images/dreams/bear/bear-05.jpg') center center no-repeat"></div>

如果你需要能够动态更改图像，你可以使用原生JS或jQuery来操作"工作区"。

这个解决方案的主要缺点是不能在浏览器中将图像用作图像。因此没有"另存为"或"复制链接"：C

Answer 2

已解决

.working_area {
background-color: yellow;
background:yellow;
width:100%;
overflow:hidden;
display:table;
}
.image_container {
background:red;
display:table-cell;
position:relative;
text-align:center;
}

示例：工作良好

Answer 3

我认为您的防弹解决方案应该是这样的：

.workingArea {
    display: table;
}
.imageContainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}
.imageContainer img {
    max-width: 100%;
    height: auto;
}

以下是演示：http://jsfiddle.net/JFrCq/30/