我一直在拉我的头发一段时间，试图想出下面的布局：一个动态大小（响应）的圆圈，里面的内容在水平和垂直方向都居中。内容的长度会有所不同，因此需要使用绝对居中方法（http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/#Height）或表格单元格方法垂直对齐，这两种方法都是我无法成功使用的。
到目前为止我的尝试 - http://codepen.io/anon/pen/clqzB
答案 0 :(得分：0)
响应率会给定心问题带来轻微的困难，但是你使用padding使得圈子的比例为1：1是正确的。
您要求使用绝对居中或Table-Cell方法，但我发现Inline-Block居中（我在文章中介绍）是不同长度内容的最可靠的跨浏览器，这一点很重要，因为圆的大小总是在变化，导致文本重排。
这也允许在已使用padding-bottom: 100%类创建的psuedo元素上使用.Inline-Center来设置圆圈的1：1比率并正确居中div.content。