Question

我有一个3级结构：

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

“workingArea”大小由浏览器的大小决定（在父级中使用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;

}

示例:: WORKING FINE

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/

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

3 个答案: