Как вертикально центрировать текст в круглом делении?

Question

Я создал круглое подразделение, в котором есть текст внутри. Проблема в том, что текст привязан к вершине круга. Я хочу, чтобы текст был вертикально центрирован. Мой текст будет не длиннее 5 символов.

.circle { 
 
    background-color:#000; 
 
    color:white; 
 
    height:150px; 
 
    width:150px; 
 
    border-radius:50%; 
 
}

<center><div class='circle'>hello</div></center>

Answer 1

Определить это свойство

display:table-cell; 
vertical-align:middle; 
text-align:center; 

.circle { 
 
    background-color:#000; 
 
    color:white; 
 
    height:150px; 
 
    width:150px; 
 
    border-radius:50%; 
 
    text-align:center; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<center><div class='circle'>hello</div></center>

Answer 2

Используйте Line-height, чтобы сделать его вертикально center.Nike, чтобы сделать текст вертикального центра делает высоту строки равна ее высоту.

.circle { 
 
    background-color:#000; 
 
    color:white; 
 
    height:150px; 
 
    line-height:150px; 
 
    width:150px; 
 
    border-radius:50%; 
 
}

<center><div class='circle'>hello</div></center>

Answer 3

Вот скрипку:

FIDDLE

Просто нужно отобразить в ячейке таблицы и определить его вертикальное выравнивание

.circle { 
    background-color: #000; 
    color: white; 
    height: 150px; 
    width: 150px; 
    border-radius: 50%; 
    display: table-cell; 
    vertical-align: middle 
} 

Answer 4

<center> устарела и больше не будет использоваться. Рекомендуются другие методы центрирования.

Что касается центрирования текста в круге, Flexbox можно сделать:

.circle { 
 
    background-color: #000; 
 
    color: white; 
 
    height: 150px; 
 
    width: 150px; 
 
    margin: 1em auto; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class='circle'>hello</div>