How do I vertically centering text inside a responsive box that has a (fluid height)

Question

I am building a responsive website and am using a grid system. The grid boxes of course do not have a set height. they are fluid. The image that is placed within them will define the height ad then it will scale with the available width of the viewport

What I am trying to do is lay text over the image and vertically align the text in the middle of the image.

I have read a ton of posts out there on vertical aligning but none seem to address doing it with a responsive box.

I set up a fiddle using the only the condensed css necessary to replicate my grid system for this example. I am using 2 grey dummy images. I want to lay text over them and align the text vertically. How would this be done? Any ideas? Id prefer to do this only with css unless jquery is absolutely needed but I think css alone can do it.

http://jsfiddle.net/zjDuE/

<div class="grid">
<div class="row">
<div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div>
<div class="c6"><img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /></div>
</div>
</div>

Answer 1

I think my codepen could be usefull for you.

http://codepen.io/SzymonDziewonski/pen/gLebo

Try to use vertical-alight with display: table-cell and your center vertical align will work for fluid heights. Good luck :)

Support for table-*