Centering texted div with absolute position - html

Question

I need few lines of text to be centered horizontaly and verticaly on image, i read a lot in internet but i didn't helped me any of solution.
HTML:
<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>
CSS:
.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;
}
Also i'm enclosing fiddle: http://jsfiddle.net/vXzKc/
I appreciate every help!

Answer 1

To achieve this, I'm quite confident you would at least have to know the height of your textcontainer. Then you could use a top/margin combination to solve this.
For what I know a table-cell is the only element that allows its content to be vertically aligned. I have no idea why, but this would allow you to make a little cheat by using display: table-cell
Here's my workaround:
HTML:
<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>
CSS:
.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;
}
http://jsfiddle.net/vXzKc/1/
Note that display: table-cell may not work in old browsers or could cause different behaviour. I have tested it in the newest browers (IE, Firefox and Chrome) and it seemed to work in all of them.