Div won't stay auto centered

Question

I've been trying to fix the red div to stay auto centered like this

so when the pink div on the left get's bigger or smaller the red div on the right will always be center but it doesn't seem to want to stay, if anyone could help I will be most grateful, thank you very much, http://jsfiddle.net/f4woL4h2/

<!DOCTYPE html>
<html>

<head>
<style>
.informationbox {
position: relative;
width: 50%;
background-color:green;
overflow: hidden;
}
.left {
width: 50%;
float: left;
background-color: pink;
}
.right {
width: 50%;
float: right;
text-align: right;
background-color: red;
vertical-align:middle;
</style>
</head>

<body>
<div class="informationbox">
    <div class="left">
        Left Filler Line #1<br />Left Filler Line #2<br />Left Filler Line #3<br />Left Filler Line #4<br />Left Filler Line #5
    </div>
    <div class="right">
        Right Filler
    </div>
</div>
</body>

Vertical centering is pitifully a very complicated matter in current CSS, even in CSS 3. Please google "CSS3 + vertical centering". — connexo, Feb 14 '15 at 20:50
One of these answers gotta work: http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — Salman A, Feb 14 '15 at 20:54

score 1 · Accepted Answer · edited May 23 '17 at 11:56

One approach would be to relatively position the parent element and then absolutely position the child element 50% from the top. Then transform: translateY(-50%) is used for vertical centering. This will work for dynamically varying heights, therefore it should always work.

Updated Example

.informationbox {
    position: relative;
}
.right {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

score 0 · Answer 2 · answered Feb 14 '15 at 20:56

If you can add a single div around the text in your right div, you can get it to work with this CSS:

.informationbox {
    position: relative;
    width: 50%;
    background-color:green;
    overflow: hidden;
    display:table;
}
.left {
    width: 50%;
    background-color: pink;
}
.right {
    width: 50%;
    text-align: right;
}
.left, .right {
    display:table-cell;
    vertical-align:middle;
}
.right div {
    background-color: red;
}

<div class="informationbox">
    <div class="left">Left Filler Line #1
        <br />Left Filler Line #2
        <br />Left Filler Line #3
        <br />Left Filler Line #4
        <br />Left Filler Line #5</div>
    <div class="right">
        <div>Right Filler</div>
    </div>
</div>

Div won't stay auto centered

2 Answers2