CSS 使一组绝对定位的 div 的边界框居中答案

【问题标题】：CSS centering the bounding box for a set of absolute-positionned divsCSS 使一组绝对定位的 div 的边界框居中
【发布时间】：2012-08-05 07:19:53
【问题描述】：

我不知道这是否可以用 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...而且通常的技巧不起作用。

最后，上面的 sn-p 只是说明性，实际上项目将被任意定位（其中一些是动态的）， 它们的大小和内容未知（也可以是动态的）。由于所有这些动态性，我宁愿让 CSS 处理所有事情都是可能的，而不是挂钩一大堆事件。

【问题讨论】：

标签： css css-position centering

【解决方案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

【讨论】：

这不是居中的，容器不适合内容。
@EricGrange 根据您的布局为项目左侧填充
什么意思？在您的 CSS 中，这些值是固定大小，在我的情况下，项目大小和位置是未知的（并且可以是动态的），因此边界框也是未知的和动态的。

【解决方案2】：

如何给#container 一个固定宽度并给出一个位置：相对；请检查此http://jsfiddle.net/65vk2/

【讨论】：

项目的宽度和位置不固定，因此边界框也不固定。