html - CSS:在一个元素上居中一组元素

Question

我正在为名为 Anki 的抽认卡程序编写模板，该程序使用 QtWebkit 来呈现卡片。

我想将一组三个元素垂直居中在中间元素的中心。元素的大小是动态的，应该根据它们的内容增长，但仍然在左边对齐。

到目前为止，我尝试了两种方法，一种是将中间元素居中，然后将顶部和底部元素绝对定位在该中间元素内。不幸的是，这意味着整个元素组不会根据每个元素水平增长，而是仅取决于中间元素的内容。整体尺寸也只达到页面高度和宽度的50%。

CSS:

.container {
    position: absolute;
    top: 0;
    bottom: 0;    
    height: 100%;
}

.left {
    background-color: green;
    left: 0;
    right: calc(100% / 3 * 2);
}

.left .middle {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%,-50%);
}

.left .top {
    position: absolute;
    bottom: 100%;
    left: 0;
}

.left .bottom {
    position: absolute;
    top: 100%;
    left: 0;
}

HTML:

<div class="container left">
    <div class="middle">
        <div class="top"> ödifj asduflsdfsk<br>j dkfj aölkdsjf df sdf sd f</div>
        dgs lk lj lkj lku öoiu ökj df sadlfjslk  dsfs df s
        <div class="bottom">dfffd  gfds gdsf f</div>
    </div>
</div>

我尝试的第二个选项是带有 justify-content: center; 的 flexbox，但这意味着中间元素不是居中的，而是整个元素组。

CSS:

.container {
    position: absolute;
    top: 0;
    bottom: 0;    
    height: 100%;
}

.center {
    background-color: blue;
    left: calc(100% / 3);
    right: calc(100% / 3);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container center">
    <div class="top"> ödifj asduflsdfsk<br>j dkfj aölkdsjf df sdf sd f</div>
    <div class="middle">
        dgs lk lj lkj lku öoiu ökj df sadlfjslk  dsfs df s
    </div>
    <div class="bottom">dfffd  gfds gdsf f</div>
</div>

再一次:3 个元素，作为一组水平居中但在元素的左侧对齐。相对于中间元素垂直居中。并且没有固定的宽度或高度。整个组应与最宽的元素一样宽。

https://jsfiddle.net/j136w6ab/

Answer 1

为什么不尝试使用 html 表格呢？它们非常适合用最少的 CSS 实现垂直居中

<div style="position:absolute; top:0; bottom:0; height:100%">

<table height="100%">
<tbody>
<tr>
    <td><!-- anything in here will vertically centre by default --></td>
</tr>
</tbody>
</table>

</div>

http://jsfiddle.net/6yody1fn/

需要大量的修补才能让它看起来不错，但它可能是一个选择