Css 水平和垂直对齐成一个圆圈

下面是CSS技巧中的一个例子，我尝试将一个圆形容器中的内容居中对齐，这个容器是响应的。这个例子似乎不能处理太多的内容，一旦我输入了超过几行的文本，就会立即中断

---

在圆圈内，我需要一个标题和一个段落。有没有办法设置此内容的最大宽度，以便在不合适时不会将其放置在圆圈外？

您可以在

内容中相应地设置顶部值

编辑

请执行以下操作：

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: table;

}
.content span{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

现在所有文本都将居中的短文本或长文本

谢谢，虽然我似乎无法使价值动态化，但这还是有效的。也许这是不可能的。我不得不重新开始这个问题，因为我无法使垂直定心工作。请看我更新的问题和一个例子。当然，没问题。我尝试了上面的示例，但跨度内容只是放在顶部，而不是垂直居中。使用最新版本的Chrome。看起来与浏览器不同，FF显示的是垂直居中的span内容，而不是Safari或Chrome。好吧，出于某种原因，我无法在我的问题中嵌入JSFIDLE链接，所以将其放在这里-