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; 的弹性框，但这意味着中间元素不是居中的，而是整个元素组。

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/

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

Answer 2

你可以试试这个：

<div class="col1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
</div>
<div class="col3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud .</p>
</div>

CSS：

.col1,
.col2,
.col3 {
    position:absolute;
    top:50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width:33.3333333%;
}
.col1 {
    background:green; 
    left:0;
}
.col2 {
    background:red;
    left:33.33333333%;
}
.col3 {
    background: yellow;
    right:0;
}

你可以在这里看到结果：http://jsfiddle.net/d7pqbkrx/2/

Answer 3

没关系，我自己想通了。几个 flexbox 的组合可以完成这项工作：

CSS：

.container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
}
.flex {
    width: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: green;
    align-content: center;
}
.oben {
    background-color: red;
    flex: 1 1;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.unten {
    flex: 1 1;
    display: inline;
    vertical-align: bottom;
        background-color: yellow;

}
.gogo {
    background-color: green;
}

HTML：

<div class=container>
<div class=flex>
    <div class=oben>dgfgsdfgdfgsfdgd</div>
    fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br>fdf jdflkd gfdlk gflskd jfgdlkjf<br> glkd jölk jfsahydfsagsgas
    <div class="unten"> fjsdlkdfjslkdjf </div>
</div>

http://jsfiddle.net/6oqqdd7e/

谢谢你的帮助。