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

Question

我需要以下 HTML ( jsfiddle )：

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

看起来像这样：

不是这样的：

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

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

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

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

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/