水平和垂直对齐圆圈

Question

根据在CSS Tricks上找到的一个例子，我试图将对齐内容放在一个响应的圆形容器中。该示例似乎无法处理大量内容，并且只要输入多行文本就会立即中断。

Code Pen Example

在圈子里面我需要一个标题和一个段落。有没有办法设置这个内容的最大宽度，以便它不适合放在圆圈之外？

Answer 1

您可以在.content code pen

中相应地设置最高价值

修改

执行此更改：

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

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

现在短文本或长文本将立即居中。

check this