可以容纳居中内容的响应式 CSS 圆圈答案

【问题标题】：Responsive CSS circles that can hold centered content可以容纳居中内容的响应式 CSS 圆圈
【发布时间】：2014-12-04 13:38:53
【问题描述】：

我正在寻找一种方法来创建一个可以容纳居中内容的响应式 CSS3 圆圈。
关于圈子，我在this question 找到了一些很好的信息。太糟糕了，似乎无法将内容居中。

This question 也与我的非常相似，尽管它是一个应该居中的图像。在我的情况下，使用背景图片不是一个选项，所以这个选项也不适用于我。

您有什么想法可以解决这个问题吗？
我当然可以使用图片，但 CSS 会更优雅！

【问题讨论】：

您考虑过使用 SVG 吗？您希望圆圈以何种方式响应浏览器窗口或内容？
内容的高度是固定的吗？
我刚刚尝试了 SVG - 就像一个魅力，虽然我仍然在寻找一个只有 CSS 的解决方案。是的，内容的高度是固定的。
@Sven：我发布了一个没有响应圈的答案，然后我注意到这是你的要求，所以我删除了它。我现在发布了一个更新的答案，它具有我相信你想要的响应能力。

标签： html css responsive-design geometry

【解决方案1】：

纯 CSS 需要许多额外的包装器

更新：原始帖子（我已删除）错过了您正在寻求响应式设计的事实。 Building upon my answer for the responsive circles question you reference 似乎适用于所有 CSS3 浏览器，see fiddle。

HTML（需要五级wrapper，我在这个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%;}
}

【讨论】：

【解决方案2】：

如果内容的高度是固定的，并且您需要 CSS 方法，请使用以下属性将其应用于 cicle 内的内容

margin: auto; /*will center the element*/
position: relative;
top: 50%;
margin-top: - [here insert the height of the element if you know in advance / 2]px

【讨论】：

【解决方案3】：

接受的答案对我不起作用，因为我想旋转圆圈。这样做：

HTML

<div class="mycircle">
  <div class="mycontent">
    <span>TEXT</span>
  </div>
</div>

CSS

.mycircle {
  width: 30%; 
  height: 0;
  padding: 15% 0; //padding top & bottom must equal width 
  border-radius: 50%;
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  background: #dedede; 
}
.mycontent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.mycontent:before {
  content: '';
  vertical-align: middle;
  display: inline-block;
  width: 0;
  height: 100%;
}

.mycontent span {
  vertical-align: middle;
  display: inline-block;
}

【讨论】：