html - 如何以百分比宽度和高度在图像上垂直和水平居中文本？

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 .我希望白色文本在龙的图像上居中(它下面的 form-container 类中的文本不移动):

我按照上面的教程尝试了: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%;
}

但是，文本拒绝居中并且 display-inline block 对我不起作用。请帮忙。谢谢!

Answer 1

尝试这样的事情:

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