Paragraph in inline-block div pushed below div if too long - html

Question

I've been trying to center some text vertically within a div and after a while browsing StackOverflow I finally came up with this:
.frame {
height: 500px;
border: 2px solid black;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.centerText {
display: inline-block;
vertical-align: middle;
}
<div class="col-md-8">
<div class="frame">
<span class="helper"></span>
<div class="centerText">
<p>This is a short paragraph.</p>
<br />
<p>More stuff.</p>
<br />
<br />
<p>etc.</p>
</div>
</div>
</div>
This works fine when I have a short paragraph, as above. But I tried changing the paragraph and found that when I make it long enough that it would have to go onto another line, the whole paragraph got moved to below the "frame" div.
See here: fiddle
If I take away the span the long paragraph will go to the next line within the frame just fine, but it's no longer vertically centered.
What is going on here? How can I have a long paragraph that doesn't make all of the text get pushed out of the div?

Answer 1

Get rid of the height: 100% within your .helper.
Does that solve your problem?
If not, please let me know so I can help you with this.
Cheers,

Answer 2

Try this here:
- I also added some padding to the <p> element so it doesn't hug the edges of the div.
.frame {
height: 500px;
border: 2px solid black;
}
.helper {
display: inline-block;
vertical-align: middle;
}
.centerText {
display: inline-block;
vertical-align: middle;
}
p {
padding: 5px;
}
<div class="col-md-8">
<div class="frame" id="frame2">
<span class="helper"></span>
<div class="centerText">
<p>This is a long paragraph. Like realy long. Too long to fit on one line in the frame. Goes to the next line. Which should be ok but for some reason isn't.
<br />
More stuff.
<br />
<br />
etc.</p>
</div>
</div>
</div>
I hope this helps

Answer 3

Your problem is that the helper, the centerText block and the space between them amounts to more than 100% width, so the centerText block overflows out of the frame.
To fix, adjust the horizontal margin of the helper to compensate for the space. There's no magic value for this - it depends on the container's font - but in your jsfiddle example, a value of -4px works. ( .helper { margin-left:-4px; } )
See http://jsfiddle.net/tngqjswm/18/
Aside 1: There are other ways of removing/hiding the space between inline-level elements
Aside 2: The helper span is a good candidate for being replaced by a pseudo-element in CSS. See http://jsfiddle.net/tngqjswm/19/

Answer 4

Set the parent .frame to display: table and the two children to display: table-cell
.frame {
height: 500px;
border: 2px solid black;
display: table;
}
.helper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.centerText {
display: table-cell;
vertical-align: middle;
}
FIDDLE