html – 可以保存居中内容的自适应CSS圈子

我正在寻找一种方法来创建一个可以保持居中内容的响应式 CSS3圈子.
关于这个圈子,我在 this question找到了一些不错的信息.太糟糕了,似乎无法将内容集中在这个中.

尽管This question是一个应该居中的图像,但它与我的相似.在我的情况下使用背景图像不是一个选项,所以这个选项对我来说也不起作用.

你有什么想法我怎么能接近这个？
当然我可以使用图像,但CSS会更优雅！

解决方法

纯CSS需要许多额外的包装

更新：原始发布(我删除)错过了您正在寻求响应式设计的事实. Building upon my answer for the responsive circles question you reference似乎适用于所有CSS3浏览器,see fiddle.

HTML(需要五个级别的包装器,我只在这个html中显示一个圆圈)

<div class="circles">
    <div>
      <div>
        <div>
          <div>
            <!-- BEG Content -->
            All types of content (see fiddle)
            <!-- END Content -->
          </div>
        </div>
      </div>
    </div>
    <!-- ditto the above 3 more times -->
</div>

CSS

.circles{
    margin:0px auto;
}
.circles > div {
    overflow:hidden;
    float:left;
    width:auto;
    height:auto;
    position: relative;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    -khtml-border-radius: 50%;
    background:#eee;
}

.circles > div > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.circles > div > div > div {
    display: table;
    width: 100%;
    height: 100%;
}
.circles > div > div > div > div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 320px)
{
    .circles > div {padding: 50%;}
}

@media (min-width: 321px) and (max-width: 800px)
{
    .circles > div {padding: 25%;}
}

@media (min-width: 801px)
{
    .circles{width:800px}
    .circles > div {padding: 12.5%;}
}