<分区>
<分区>
我需要能够在父 div 的垂直中间 对齐多个 堆叠的 div。我无法编辑 HTML，我只能编辑现有元素的 CSS 并在需要时包含 javascript。
父 div 和内容 div 都有可变高度，所以我不能使用设置的填充或边距。我无法添加更多的 div 来充当容器。
此代码是使用 Foundation 进行布局的较大页面的一部分，这就是高度似乎已设置的原因。但是，随着页面大小的调整，它确实会有所不同，我无法将基础类应用于 div。
这是我当前解决方案的 JS Fiddle。
这是我正在使用的 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>
最佳答案
您应该使用父 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。
关于html - 垂直对齐父级中的多个 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34281026/