Html 带绝对位置的居中文本div

我需要几行文字在图像上水平和垂直居中，我在互联网上读了很多书，但我并没有帮助我解决任何问题

HTML:

我还附上小提琴：

---

我感谢你的帮助

要做到这一点，我很有信心您至少需要知道文本容器的高度。然后，您可以使用顶部/边缘组合来解决此问题

据我所知，表格单元格是唯一允许其内容垂直对齐的元素。我不知道为什么，但这将允许您通过使用display:table cell进行一些欺骗

以下是我的解决方法：

HTML:

请注意，display:table单元格在旧浏览器中可能无法工作，或者可能导致不同的行为。我已经在最新的浏览器（即Firefox和Chrome）上测试了它，它似乎在所有浏览器中都能正常工作

<div id="textContainer">
    Preparing for important meeting? <br />
    <b>Drink some coffeee!</b> <br />
    <img src="http://i.imgur.com/me2octq.jpg" />
</div>


<div id="baner">
    <div class="imgBaner"></div>
</div>

.imgBaner {
    margin: 0 auto;
    width: 100%;
    height: 460px;
    background: url(http://i.imgur.com/5pijCrS.jpg) no-repeat center;
    position: relative;
}


#textContainer {
    position: absolute;
    font-size: 32px;
    text-align: center;
    z-index: 1;
    color: yellow;
}

<div class="imgBaner">
    <div id="textContainer">
        Preparing for important meeting? <br />
        <b>Drink some coffeee!</b> <br />
        <img src="http://i.imgur.com/me2octq.jpg" />
    </div>
</div>

.imgBaner {
    margin: 0 auto;
    height: 460px;
    background: url(http://i.imgur.com/5pijCrS.jpg) no-repeat center;
    display: table-cell;
    vertical-align: middle;
}
#textContainer {
    font-size: 32px;
    text-align: center;
    color: yellow;
}