title: How do I vertically centering text inside a responsive box that has a (fluid height)
body: <p>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</p>
  
  <p>What I am trying to do is lay text <strong>over</strong> the image and vertically align the text in the middle of the image.  </p>
  
  <p>I have read a ton of posts out there on vertical aligning but none seem to address doing it with a responsive box.</p>
  
  <p>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 <strong>over</strong> 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.</p>
  
  <p><a href="http://jsfiddle.net/zjDuE/">http://jsfiddle.net/zjDuE/</a></p>
  
  <pre><code>&lt;div class="grid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="c6"&gt;&lt;img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /&gt;&lt;/div&gt;
  &lt;div class="c6"&gt;&lt;img src="http://dummyimage.com/600x400/cccccc/cccccc.jpg" alt="-" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>