css - 在一个圆圈中水平和垂直对齐

Question

按照在 CSS Tricks 上找到的示例，我正在尝试将响应式圆形容器内的内容居中对齐。该示例似乎无法处理太多内容，并且在我输入超过几行文本时立即中断。

代码笔示例

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

Answer 1

您可以在.content 代码笔中相应地设置最高值

编辑

执行此更改：

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

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

现在短文本或长文本现在都将居中。

检查这个