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

Question

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

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

Answer 1

响应比给定心问题增加了一点难度，但是你在正确的轨道上使用padding给圆一个 1:1 的比例。

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

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

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