中心相对div内的绝对内容

Question

如何将div内容置于div中心，并根据显示的行数添加动态div高度？

CSS：

div {
    position: relative; 
    height: auto; 
    width: 100%;
    margin: 0px auto;
}
span { 
    position: absolute; 
    width: 10px; 
    height: 10px; 
    background-color: #003858;
}

这是html内容：

<div>
 <span style="left: 12px; top: 0px;">&nbsp;</span>
 <span style="left: 24px; top: 0px;">&nbsp;</span>
 <span style="left: 36px; top: 0px;">&nbsp;</span>
 <span style="left: 48px; top: 0px;">&nbsp;</span>
 <span style="left: 60px; top: 0px;">&nbsp;</span>                  
 <span style="left: 12px; top: 15px;">&nbsp;</span>
 <span style="left: 24px; top: 15px;">&nbsp;</span>
 <span style="left: 36px; top: 15px;">&nbsp;</span>
 <span style="left: 48px; top: 15px;">&nbsp;</span>
 <span style="left: 60px; top: 15px;">&nbsp;</span>                 
 <span style="left: 12px; top: 30px;">&nbsp;</span>
 <span style="left: 24px; top: 30px;">&nbsp;</span>
 <span style="left: 36px; top: 30px;">&nbsp;</span>
 <span style="left: 48px; top: 30px;">&nbsp;</span>
 <span style="left: 60px; top: 30px;">&nbsp;</span>
 </div>

Answer 1

只需添加到容器div样式：

left: 50%;

结帐DEMO

您可以尝试根据跨度总宽度调整百分比。

Answer 2

将margin-left:50; /*50% is about halfway*/添加到您的div。

修改

left与margin-left几乎相同。

Answer 3

我不会绝对定位，除非你从一个精确的模型构建html，否则它不是很有活力。

CSS

#container {
    width:100%;
}
#blocks {
    margin: auto auto;
    width: 80px;
    background-color: #ff8200;
    line-height: 0;
    padding: 0 0 5px 0;
}
span { 
    display: inline-block;
    width: 10px; 
    height: 10px;
    margin: 5px 0 0 5px;
    background-color: #003858;
}

HTML

<div id="container">
 <div id="blocks">
  <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
 </div>
</div>

https://jsfiddle.net/yeh28ja1/

通过这种方式，您可以根据需要添加跨度并增加#blocks的宽度，而无需进行大量数学运算。但是，根据您的应用程序的作用，这可能会适得其反。我们真的不太了解你想要做什么。

更新了一些绝对定位中心技术。

https://jsfiddle.net/yeh28ja1/2/

请注意使用负边距，这取决于绝对定位元素的宽度。