div의 중심을 어떻게 수직으로 배치합니까?

Question

가능한 중복은 : 지금

.title_text_only{ position:absolute; width:100%; display:none; z-index:9; top:50%; bottom:50%; text-align:center; color:#fff; font-size:18px; text-shadow: 1px 1px 1px #666; } 

What's The Best Way of Centering a Div Vertically with CSS

는

, 작동하지 않습니다. 상위 50 %는 수직으로 센터링하지 않습니다. 그것은 바닥에 조금 있습니다. 상단 경계가 50 % 인 것처럼 보입니다.

Answer 1

을 ([height/2]를 입력하고 대부분의 브라우저가 분수 픽셀을 반올림 않습니다 100 % 확대시 확대). 아이의 내용이 여러 줄에 포장 예상되는 경우,

parent { 
    height: [height]px; 
} 
child { 
    /* Make the element part of the inline flow, as vertical-align isn't supported on block elements */ 
    display: -moz-inline-box; /* Old Firefox doesn't support inline-block */ 
    display: inline-block; 
    /* IE < 8 doesn't support inline-block on native block-level elements */ 
    *display: inline; 
    *zoom: 1; 

    /* The interesting bit */ 
    line-height: [height]px; 
    vertical-align: middle; 
} 

당신은 하위에 포장 할 수 있습니다 : 당신이 부모의 높이를 지정할 수있는 경우

, 당신은 이런 식으로 뭔가를 할 수 line-height을 다시 설정하는 하위

Answer 2

How to vertically center a div for all browsers?

Answer 3

top: 50%;는 의심 정확히 않습니다 : 그것은 50 % 높이에 최고 가장자리을 배치합니다. 요소의 높이의 절반에 해당하는 음수 수직 여백을 적용하여이 효과를 오프셋 할 수 있습니다. 예를 들어, 요소가 100 픽셀 높았다 경우,이 속성 추가합니다 : 당신이 상자의 높이를 지정할 수 있습니다 경우 margin-top: -[height/2]px를 사용할 수

margin-top: -50px; 

Answer 4

요소의 높이, 다음

CSS는 다음을 수행 고정되어있는 경우 : 동적 높이 사업부를 중심

다른

.title_text_only{ 
position:absolute; 
width:100%; 
display:none; 
z-index:9; 
**top:50%;** 
bottom:50%; 
text-align:center; 
color:#fff; 
font-size:18px; 
text-shadow: 1px 1px 1px #666; 
**margin-top: -(half the height)** 
} 

수직에, 당신은 자바 스크립트를 필요 ..

document.getElementById('myElement').style.marginTop = (-1) * document.getElementById('myElement').offsetHeight/2