另一个垂直对齐 CSS 问题 - 另一个 div 内的两个 div 顶部/底部答案

【问题标题】：Yet another vertical align CSS issue - two divs top/bottom inside another div另一个垂直对齐 CSS 问题 - 另一个 div 内的两个 div 顶部/底部
【发布时间】：2015-11-30 23:38:40
【问题描述】：

我需要以下 HTML (jsfiddle)：

<div class="main">
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
</div>

看起来像这样：

不是这样的：

【问题讨论】：

看这个：stackoverflow.com/questions/6490252/…
已经看过了。适用于单个 div，但不能像这样堆叠两个。
Fiddle
哇，所有的反对票是怎么回事？这是一个非常直接的问题，提供了一个示例。我知道这是一个常见问题，但我找不到适合这种情况的解决方案。
@JeradRose 讨厌的人会讨厌 :( 仅供参考，我没有投反对票

标签： html css vertical-alignment

【解决方案1】：

position: relative;
top: 50%;
transform: translateY(-50%);

【讨论】：

关闭，但not quite（我也看到了that article）。

【解决方案2】：

你能稍微改变一下你的 HTML 布局吗？

.main {
    display: table;
    height: 100px;
    border: solid 1px;
}
.inner {
    display:table-cell;
    vertical-align:middle
}
.top, .bottom {background:yellow;}

<div class="main">
    <div class="inner">
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
</div>

在下面检查。

【讨论】：

【解决方案3】：

只需将父级的显示设置为表格单元格：

.main {
    display: table-cell;
    height: 100px;
    border: solid 1px;
    vertical-align: middle;
}

<div class="main">
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
</div>

【讨论】：

完美，谢谢！有一个✓为您的时间。 :)

【解决方案4】：

HTML：

<div class="main">
    <div class="wrapper">
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
</div>

CSS：

.main {
    display: inline-block;
    height: 100px;
    border: solid 1px;
    line-height: 100px;
    vertical-align: middle;
}

.wrapper {
    line-height: 1em;
    display: inline-block;
    vertical-align: middle;
}

演示：https://jsfiddle.net/q0kLojwx/5/

【讨论】：