另一个垂直对齐 CSS 问题 - 两个 divs top/bottom 在另一个 div 中

Question

我需要以下 HTML (jsfiddle):

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

看起来像这样：

不是这样的:

Answer 1

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

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

检查下面这个。

Answer 3

只需将父级的显示设置为table-cell:

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

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

另一个垂直对齐 CSS 问题 - 两个 divs top/bottom 在另一个 div 中

Yet another vertical align CSS issue - two divs top/bottom inside another div

html

css

vertical-alignment