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

Question

我需要以下HTML（jsfiddle）：

Debug

看起来像这样：

不这样：

Answer 1

您可以稍微更改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 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

Answer 4

HTML：

var updateUserEarnings = function (User,prizeValue){
//var user = new Parse.User();
User.set("cashBalance", User.get("cashBalance")+prizeValue);

CSS：

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

DEMO：https://jsfiddle.net/q0kLojwx/5/