CSS 将一组绝对定位的 div 的边界框居中

Question

我不知道这是否可以用 CSS 完成，但在采用 JavaScript 方式之前，我想知道是否可以(作为一个整体)将一组绝对定位的 div 居中:

<div id="container">
  <div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
  <div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
  <div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
  <div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>

我想将页面中那些元素的边界框居中。

当然，因为它们是用“position:absolute”设置样式的，所以它们不在流中，所以容器 div 的大小为 0 px...并且通常的技巧不起作用。

最后，上面的代码片段只是说明性的，在实践中元素将被任意定位(其中一些是动态的)，并且< strong>它们的大小和内容未知(也可以是动态的)。由于所有这些动态性，我宁愿让 CSS 处理所有事情成为可能，而不是 Hook 一大堆事件。

Answer 1

嘿，现在你可以像这样轻松地更改你的 html 和 css

HTML

<div id="container">
  <div id="item1">...some content...</div>
  <div id="item2">...some content...</div>
  <div id="item3">...some content...</div>
  <div id="item4">...some content...</div>
</div>

CSS

#container{
background:red;

  overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
  margin:10px;
  margin-left:100px;
}

Live demo