변형 된 수직 센터링이 예상대로 작동하지 않습니다.

Question

일반적으로이 코드는 작동하지만 어떤 이유로 인해 부모 요소의 가운데에 세로로 가운데 맞춤이 아닙니다. 이것이 배경 이미지 때문일 수 있습니까?

http://jsfiddle.net/tmyie/BcmNw/

<div class="background-image"> 
    <div class="omg-title">This is the title</div> 
</div> 

CSS :

.background-image { 
    background-image: url(''); 
    height: 600px; 
    background-size: contain; 
    position: relative; 
    background-position: center; 
    background-repeat: no-repeat; 
    margin: 0 auto; 
    text-align: center; 
} 
.omg-title { 
    padding: 15px; 
    -webkit-transform: translate(-50%, -50%); 
    position: absolute; 
} 

Answer 1

당신이 위치를 사용하고 있기 때문에 : 절대 당신은 변환 제거하고 함께 중앙에 텍스트를 설정할 수 있습니다 다음과 같이 변경 : 당신이 쇼 100 픽셀 인 경우

.omg-title { 
    top: 50%; 
    left: 50%; 
    position: absolute; 
} 

완벽한 중심으로 수평으로 당신은 예를 들어 텍스트의 폭을 알아야한다 자민련 margin-left: -50px;

http://jsfiddle.net/7ScDh/

Answer 2

이들 중 하나를 시도하거나 절대 위치 삭제 :

1) 중심 .omg 타이틀 DIV

.omg-title { 
    left: 50%; 
    position: absolute; 
    margin-left: -50px; // depending on width 
} 

을 2) 줄다 .omg 제목 사업부 전체 폭 :

.omg-title { 
    width: 100%; 
} 

편집 : 수직 allignment를 들어, (데모 여기 : http://jsfiddle.net/6E5as/를) 시도

.omg-title { 
    top: 50%; 
    position: absolute; 
    margin-top: -10px; // depending on height 
    text-align: center; 
    width: 100%; 
} 

Answer 3

당신은 그냥 멀리 .omg-title의 스타일을 모두 가지고가는 경우에, 그것은 센터 괜찮습니까 .background-image은 text-align:center;입니다. 증거

Answer 4

에 대한

는

JSFiddle 위치를 제거하고 속성을 변환하고 당신을 위해 작동합니다

.omg-title { 
    padding: 15px; 
}