Как центрировать текст по вертикали и по горизонтали над изображением с процентной шириной и высотой?

Question

Я пытался центрировать мой текст над div с процентной шириной и высотой. Я попытался использовать flexbox, но это не сработало для меня, поэтому я использовал этот учебник в качестве ссылки: http://jsfiddle.net/4be9cp23/. Вот код из этого учебника:

HTML

<div id="header"> 
     <h1>Home</h1> 
</div> 

CSS

#header { 
     background-color: red; 
     color: white; 
     text-align: center; 
     vertical-align: middle; 
     width: 100%; 
     height: 15%; 
    } 
#header h1{ display:inline-block; } 

Вот ссылка на демо, что я работаю на http://codepen.io/maureenv/pen/dMEPap?editors=1100. Я хочу, чтобы белый текст по центру над изображением дракона (без текста в классе форм-контейнера ниже его перемещения):

Я следовал выше учебник и попробовал: HTML

<div class="masthead-container"> 
     <img src="http://maureenvogel.com/images/charizard.jpg" class="masthead-img"> 

     <div class="quote-container"> 
     <div class="quote"> "This is my quote that won't center no matter what I do. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. " </div> 
     <div class="quote-author"> -quote by me</div> 
     </div> 
    </div> <!-- close masthead container div --> 

CSS

.masthead-container .masthead-img{ 
    width: 100%; 
    top: 0; 
    left: 0; 
    display: block; 
    position: relative; 
} 

.masthead-container { 
    text-align: center; 
    vertical-align: middle; 
} 

.masthead-container .quote-container{ 
    display: inline-block; 
} 

.quote-container{ 
    top: 0; 
    left: 0; 
    color: white; 
    position: absolute; 
    text-align: center; 
    width: 100%; 
} 

Однако текст отказывается центрирования и дисплей-рядный блок не работает для меня. Пожалуйста помоги. Спасибо!

Answer 1

попробовать что-то вроде этого:

.quote-container{ 
    top: 50%; 
    left: 50%; 
    color: white; 
    position: absolute; 
    text-align: center; 
    display:inline-block; 
    transform:translateX(-50%) translateY(-50%); 
} 

Answer 2

, возможно, вы могли бы попытаться положить IMG на фоне DIV и сделать:

.masthead-container{ 
 
    display: table; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: url:(...); 
 
} 
 

 
.text-to-center{ 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    
 
}

<div class="masthead-container"> 
 
    <div class="text-to-center"><p>hello-world</p></div> 
 
</div>