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

Posted 2023-03-05

【中文标题】如何使用 CSS 在动态大小的容器中将动态大小的 div 居中？

【英文标题】：How can I center a dynamically sized div in a dynamically sized container using CSS?

【发布时间】：2013-08-22 02:47:00

【问题描述】：

我有一个 3 级结构：

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

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

我想将图像容器置于工作区域的中心。

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

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

Problem simulation in JSFiddle

谢谢！

【问题讨论】：

固定宽度（工作区域）不会根据您的需要扩展。

是的，我知道。我不希望工作区扩展，它的大小由其父级根据当前视口大小设置。我在 JSFiddle 中使用了固定大小，只是为了使示例更简单。

【参考方案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

【讨论】：

嘿，谢谢。问题是我想将 imageContainer 居中，而不仅仅是图像本身。原因是我稍后会根据 imageContainer 的大小和位置使用画布。

嗯，还有另一种解决方案，它叫做“javascript”。我没有看到任何跨浏览器的 CSS 方式来修复它。

是的。我希望避免这种情况，因为使用 JS 我需要处理诸如浏览器调整大小之类的事件（如果我使用 CSS，则会自动处理这些事件）。无论如何，谢谢。

【参考方案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

【讨论】：

嘿，这个解决方案的问题是对我来说“workingArea”不能根据内容改变它的大小。正如我在问题中提到的，它从其父级接收基于视口大小的大小（为简单起见，我没有在 JSFiddle 中包含实际代码）。无论如何，谢谢。

【参考方案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/