Vertical align multiple divs in parent

Question

I need to be able to align multiple stacked divs in the vertical middle of a parent div. I am unable to edit the HTML, I can only edit the CSS of the existing elements and include javascript if it is required.

Both the parent and the content divs have variable heights so I cannot use set paddings or margins. I am unable to add in more divs to act as containers.

This code is part of a larger page which uses Foundation for its layout, which is why the height appears to be set. However it does vary as the page is resized and I cannot apply foundation classes to the divs.

Here is a JS Fiddle of my current solution.

http://jsfiddle.net/587hvqky

Here is the HTML I am working with.

<div class="wmapp-tile" style="border:1px solid red; padding: 0px; margin: 0px; height: 350px; display:block;" data-equalizer-watch="">
    <div id="wmappTile936" class="wmapp-title-title_tile wmapp-tile " style="text-align: left; border: 1px solid blue;">
            <div id="wmappTileInner936" style="padding: 10px;margin: 0px;">
            <div class="wmapp-title-tile-item-view">
                <h3>Relaunches</h3>
            </div>
        </div>
     </div>
     <div id="wmappTile937" class="wmapp-blurb-text_tile wmapp-tile " style="text-align: left; border: 1px solid blue;">
        <div id="wmappTileInner937" style="padding: 10px;margin: 0px;">
        <div>
            <span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget tortor nec libero tincidunt ornare at non neque...
            </span>
        </div>
    </div>
  </div>                                                                                        
</div>

Answer 1

You should use display:table-cell and vertical-align:middle of parent div. like following:

<div class="wmapp-tile" style="border:1px solid red; padding: 0px; margin: 0px; height: 350px; display: table-cell; vertical-align: middle;" data-equalizer-watch="">

And if possible apply separate css instead of giving inline css.

Updated Fiddle