可以创建内容居中的响应式圆形容器吗？

【问题标题】：Possible to create responsive circle container with centered content?可以创建内容居中的响应式圆形容器吗？
【发布时间】：2013-08-17 06:20:46
【问题描述】：

一段时间以来，我一直在努力想出以下布局：一个大小动态（响应式）的圆圈，其中的内容水平和垂直居中。内容的长度会有所不同，因此需要使用绝对居中方法 (http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height) 或表格单元方法进行垂直对齐，这两种方法我都无法成功使用。

到目前为止我的尝试 - http://codepen.io/anon/pen/clqzB

【问题讨论】：

解决方案是here。检查该答案“Resize with Content - Improvement”的最新更新

标签： responsive-design center vertical-alignment geometry alignment

【解决方案1】：

响应比率为居中问题增加了一点难度，但您使用 padding 为圆提供 1:1 的比率是正确的。

您要求使用 Absolute Centering 或 Table-Cell 方法，但我发现 Inline-Block 居中（我在文章中介绍）对于不同长度的内容是最可靠的跨浏览器，这很重要，因为圆圈的大小总是在变化，导致文本重排。

这还允许在已使用 .Inline-Center 类创建的伪元素上使用 padding-bottom: 100% 来设置圆的 1:1 比例并将 div.content 正确居中。

这是代码：http://codepen.io/shshaw/pen/kGdAe

【讨论】：