div 내에서 세로 및 가로 가운데 맞춤 텍스트

Question

텍스트가 겹쳐진 그래픽 배경으로 구성된 div가 있습니다. 이 요소를 수평 및 수직 가운데에 맞춰야합니다. 하지만 텍스트를 세로로 가운데 놓을 수는 없습니다. 는 CSS에서

<div id="step"> 
    <div id="background"> 
     <img src="buttonbackground.png" class="stretch" alt="" /> 
    </div> 
    <div> 
     <h3>some text</h3> 
    </div> 
</div> 

:

#background { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    z-index: -1; 
} 

#step { 
    text-align:center; 
    color:white; 
} 

.stretch { 
    width:200px; 
    height:40px; 
} 

나는 종종 다른 곳에서 참조 본 적이 테이블 셀/수직 정렬 기술을 사용하여 잘 작동을하지 않습니다 지금까지, 나는 다음과 같은 코드가 있습니다.

Answer 1

그것이 H3 인 것을 감안할 때 나는 그것이 제목 일 것이라고 가정하고 있으므로 아마 한 줄의 텍스트가 될 것입니다. 이 경우 h3의 line-height을 컨테이너의 높이로 설정하면됩니다.

그것은 당신이 할 수있는 단락의 대신하는 경우 :

이 비율로 픽셀을 혼합하지 마십시오

#centeredDiv { 
    position:absolute; 
    top: 50%; 
    left: 50% 
    margin-top:-20px ;(half the height of the container) 
    margin-left: -100px; (half the width of the container) 

은}.

Answer 2

시도 :

#step { 
    text-align: center; 
    vertical-align: center; 
    color: white; 
    height: 40px; 
} 

편집 :

또는 명시 적으로 시도 #background의 높이가 대신 100 % 40px 설정을 할 수있다. 동일한 효과를 가져야합니다.