절대 중심의 구면에 수직 중심의 텍스트

Question

몇 가지 기술을 시도했지만 지금까지는 절대 중심의 구에 텍스트를 가운데 맞추지 않습니다. 구의 크기는 알려져 있지만 텍스트의 길이는 알 수 없습니다. 여기에 수직 정렬이 결여 된 예는 다음과 같습니다

http://jsfiddle.net/eevw3oes/

CSS :

div 
{ 
    position: absolute; 
    border-radius: 50%; 
    top: 50px; 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    overflow: hidden; 
    vertical-align: middle; 
    text-align: center; 
} 

Answer 1

인 flexbox : http://jsfiddle.net/eevw3oes/2/

div { 
    align-items: center; 
    display: flex; 
    … 
} 

이도 더 DOM을 추가하고 기존의 CSS를 사용하여 수행 할 수 있습니다. vertical-align: middle을 사용하려고하지만 블록 요소 (인라인 블록 및 표 셀에만 해당)에서 작동하지 않습니다.

Answer 2

난 당신이 Fiddle를 참조 width

line-height: 100px; 

와 같은 값으로 line-height을 추가 할 수 있다고 생각

누군가 이미 Stackoverflow에 비슷한 문제가있었습니다. 구조에

Answer 3

인 flexbox가 변환됩니다 때문에 작동하고, 다음과 같습니다

<div class=circle style="left: 50px;"> 
    <div class=text> 
    I'd like to be centered. 
    </div> 
</div> 

<div class=circle style="left: 200px;"> 
    <div class=text> 
    I would like also like to be centerd. Even though I have long text. I would like to be centerd horizontally and vertically. Is that possible. Oh I wish it would work. 
    </div> 
</div> 

나는 텍스트 내부 <div> 요소를 추가했습니다. CSS는이 :

.circle { 
    position: absolute; 
    border-radius: 50%; 
    top: 50px; 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    overflow: hidden; 
    padding: 20px; 
} 

div.text { 
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    text-align: center; 
    height: auto; 
} 

CodePen.