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

Question

我有一个三级结构：

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

"workingArea“的大小是由浏览器的大小决定的(在parent中使用flex )。"imageContainer“大小由加载的图像的大小决定(取决于图像，每个图像都有不同的大小)。

我想让图像容器在工作区居中。

这里有一个问题:因为“imageContainer”的大小是由图像决定的，所以它可以大于工作区的大小，在这种情况下，我希望图像的中心位于工作区的中心(图像应该溢出到左边和右边)。

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

Problem simulation in 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/