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/

非常感谢您的帮助。

CSS：一个元素的中心元素组

3 个答案: