水平和垂直對齊一個圓圈

Question

下面是一個在CSS技巧中發現的示例，我試圖將居中對齊的內容放在一個響應的圓形容器中。這個例子似乎無法處理很多內容，並且只要輸入了幾行文本就立即中斷。

Code Pen Example

裏面我需要有一個標題和段落中的圓圈。有沒有什麼辦法可以設置這個內容的最大寬度，這樣當它不合適時它就不會放在圓圈之外了？

Answer 1

您可以在.contentcode 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