html - 在相对 div 中居中绝对内容

Question

如何将 span 内容居中放置在一个 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

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