Подход 1: line-height
равные height
трюки (работает для одной строки текста).
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
font-size: 30px;
background: #9cc;
line-height: 150px;
text-align: center;
}
<div class="circle">Hello</div>
подход 2: line-height
+ inline-block
(работает как для одного и нескольких строк текста).
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
font-size: 30px;
background: #9cc;
line-height: 150px;
text-align: center;
}
.circle span {
display: inline-block;
vertical-align: middle;
line-height: normal;
padding: 0 25px;
}
<div class="circle">
<span>Test Long Item</span>
</div>
Подход 3: с помощью CSS table
+ table-cell
(работает как для одного и нескольких строк текста).
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
font-size: 30px;
background: #9cc;
text-align: center;
display: table;
}
.circle span {
display: table-cell;
vertical-align: middle;
padding: 0 25px;
}
<div class="circle">
<span>Test Long Item</span>
</div>
подход 4: с помощью CSS3 transform
(работает как для одного и нескольких строк текста).
.circle {
width: 150px;
height: 150px;
border-radius: 50%;
font-size: 30px;
background: #9cc;
text-align: center;
position: relative;
}
.circle span {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="circle">
<span>Test Long Item</span>
</div>