CSS: Center group of elements on one element

Question

I'm writing a template for a flashcard program called Anki which uses QtWebkit to render the cards.

I would like to center a group of three elements vertically on the center of the middle element. The elements are of dynamic size and should grow according to their contents but still align on the left.

I tried two approaches thus far, the one is to center the middle element and then absolutely position the top and bottom elements within that middle element. Unfortunately this means that the overall group of elements will not grow horizontally depending on each of the element but instead only depending on the content of the middle one. Also the overall size only reaches 50% of the height and width of the page.

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>

The second option I tried was a flexbox with justify-content: center; but this means that the middle element isn't centered but only the whole group of elements.

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>

So again: 3 elements, as a group horizontally centered but aligned on the left side of the elements. Vertically centered relative to the middle element. And no fixed widths or heights. The overall group should be as wide as the widest of the elements.

https://jsfiddle.net/j136w6ab/

Answer 1

Why not try and use an html table? They've great for vertical centering with minimal 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/

will need a lot of tinkering to get it to look nice but it might be an option

Answer 2

You can try this:

<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;
}

You can see the result here: http://jsfiddle.net/d7pqbkrx/2/

Answer 3

Never mind, I figured it out myself. A combination of several flexboxes does the job:

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/

Thanks anyways for the help.