CSS는

Question

그래서 기본적으로 내가 (수직) 텍스트를 중심으로해야 할 변수 높이 부모의 텍스트를 중심으로하지만, 내가이 작업을 수행 할 수있는 방법, 여러 줄에있을 수 있기 때문에 높이가 변수?

내가 무엇을 시도했다 :

.box { 
    text-align: center; 
    vertical-align: center; 
} 

.box { 
    position: absolute; 
    top: 50%; 
    text-align: center; 
    left: 50%; 
} 

.box { 
    margin: 50% auto; 
    text-align: center; 
} 

내가 JS와 그것을 해결하는 데 있다면이도 가능한 경우 모르거나하지 않습니다.

Answer 1

사용 display:table-cell

.box { 
    text-align: center; 
    vertical-align: middle; 
    background:black; 
    color:white; 
    height:200px; 
    display:table-cell; 
    width:450px 
} 

DEMO - Single line

DEMO - Multi line

Answer 2

여기 가면 가로 세로로 작동합니다.

HTML :

<div class="area"> 
     <div class="bubble"> 
      <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> 
     </div> 
</div>​ 

CSS :

.area { 
     width: 300px; 
     height: 300px; 
     background: url(../images/abe-bg.png) no-repeat; 
     position: relative; 
    } 

    .bubble { 
     position: absolute; 
     left: 93px; 
     top: 21px; 
     width: 135px; 
     height: 84px; 
     display: table; 
    } 

    .bubble p { 
     display: table-cell; 
     vertical-align: middle; 
     text-align: center; 
    }​ 

DEMO