How to vertically center div in floated div? - css

Question

I'm trying to do something that doesn't seem to have been asked. I have a jsfiddle:
http://jsfiddle.net/kahanu/zo7yj3s0/4/
I have two floated divs side-by-side, the left div has content that creates height of the parent div. The right div will simply have buttons that need to be vertically centered in whatever height the left div creates. So there are no known dimensions, either height or width.
Here's what I have:
<div class="parent">
<div class="line">
<div class="left">
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
<p>This is some content to create some height to the div. </p>
</div>
<div class="right">
<button>Center me vertically</button>
</div>
</div>
</div>
And this is the CSS:
html, body {
height: 100%;
width: 100%;
font-size: 13px;
}
.parent {
height: 10%;
width: 100%;
background-color: grey;
font-size: 1.6em;
display: table;
}
.line {
display: table-cell;
vertical-align: middle;
background: blue;
}
.left {
float: left;
width: 50%;
background-color: yellow;
}
.right {
float: right;
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
}
I feel like I'm close, I'm just missing an important concept.
So how can I vertically center the button in the right-hand div?

Answer 1

Vertical align only applies to inline or inline-block elements. It affects the
alignment of the element itself, not its contents (except when applied
to table cells) When it’s applied to a table cell, the alignment
affects the cell contents, not the cell itself
Read more on this here: http://www.impressivewebs.com/css-vertical-align/
What you can apply this CSS to your button.
button{
position: relative;
top: 50%;
transform: translateY(-50%);
}
If you're into using mixins you can simply write a vertical alignment rule and reuse throughout your project.
Mixin:
#mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
CSS:
button {
#include vertical-align();
}
CODEPEN DEMO

Answer 2

Instead of floating the divs you could set their display to table-cell instead:
.left {
display:table-cell;
width: 50%;
background-color: yellow;
}
.right {
width: 50%;
background-color: red;
height: 100%;
vertical-align: middle;
text-align: center;
display:table-cell;
}
jsFiddle example