垂直对齐父级中的多个div [重复]答案

【问题标题】：Vertical align multiple divs in parent [duplicate]垂直对齐父级中的多个div [重复]
【发布时间】：2016-03-20 18:14:00
【问题描述】：

我需要能够在父 div 的 垂直中间 中对齐多个堆叠的 div。我无法编辑 HTML，我只能编辑现有元素的 CSS 并在需要时包含 javascript。

父 div 和内容 div 的高度都是可变的，所以我不能使用设置的填充或边距。我无法添加更多 div 来充当容器。

此代码是使用 Foundation 进行布局的较大页面的一部分，这就是设置高度的原因。但是，随着页面大小的调整，它确实会有所不同，并且我无法将基础类应用于 div。

这是我当前解决方案的 JS Fiddle。

http://jsfiddle.net/587hvqky

这是我正在使用的 HTML。

<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>

【问题讨论】：

标签： html css

【解决方案1】：

您应该使用父 div 的 display:table-cell 和 vertical-align:middle。如下：

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

如果可能的话，应用单独的 css 而不是提供内联 css。

Updated Fiddle

【讨论】：