Centering within element via jQuery, for Responsive Web Design

Centering within element via jQuery, for Responsive Web Design

I have begun working with a lot of sites which are designed to take
advantage of the techniques and/or methodologies of Responsive Web Design,
and I have a reoccurring problem, which I cannot seem to wrap my head
around; without writing a ridiculous amount of Media Queries, to
incrementally adjust the 'contents' of an element (i.e.: div, figure,
etc...) both vertically, and horizontally.
Now, horizontally centering an 'img', or 'div' element within a parent
element is a no-brainer, however, as certain elements (i.e.: div, figure,
etc...) are decreased in width, their height naturally increases, with
certain layouts. Therefore, instead of incrementally adjusting the
contents of a parent element, I was wondering if jQuery could offer a
solution, via measuring the 'height' of an element (as the element
increased in height), and then adjusting either its padding, margin, or
line-height appropriately, with response to the change in height of the
parent element, to make the contents continuously appear as if they are
centered, vertically.
At the moment, I have am attempting to float the entire contents within
each 'figure' element, (which at the moment happens to be one 'img'
element, and one 'div'), vertically, in response to its container/parent
elements height. Can this be done, and if so, could somebody please point
me in the right direction, for any information regarding this matter would
surely be appreciated.
<figure>
<img src="#" alt="#">
<div class="caption"> /* <caption> element not working in Chrome and
FF!? */
"caption"
</div><!-- .caption -->
</figure>
If anybody requires a clarification of the above question, please feel
free to ask. Again, any assistance concerning this matter would be
appreciated.