Vertical aligning text in a div - html

Question

Am trying vertical align some text within a div to the center but I am unable to do so. I've tried using the display method to be table and table cell but this doesn't seem to work. Please help.
Fiddle
HTML:
<div class="vc_row wpb_row vc_row-fluid blunetser-banner vc_custom_1415005990938">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="wpb_wrapper">
<div class="vc_row wpb_row vc_inner vc_row-fluid blunet-serv-banner-row">
<div class="wpb_wrapper">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>Some text will go here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.blunetser-banner {
display: table;
height: 300px;
background: #eee;
}
.blunet-serv-banner-row {
display: table-cell;
vertical-align: middle;
}

Answer 1

This is my favorite solution for this issue (simple and very well browser supported):
html
<div class="vcenter">
<p>Text</p>
</div>
css
.vcenter{ //change this
width: 300px;
height: 300px;
}
.vcenter:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.vcenter :first-child {
display:inline-block;
vertical-align:middle;
}
Fiddle: http://jsfiddle.net/u5x7ta0w/2/
So, for your case:
.wpb_wrapper{
width: 300px;
height: 300px;
}
.wpb_wrapper:before {
content: " ";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.wpb_wrapper :first-child {
display:inline-block;
vertical-align:middle;
}

Answer 2

I think you used the wrong class names in your stylesheet?
http://jsfiddle.net/f72ocv0x/5/
.wpb_text_column {
display: table;
height: 300px;
background: #eee;
}
.wpb_wrapper {
display: table-cell;
vertical-align: middle;
}

Answer 3

Because .blunet-serv-banner-row is not the direct child of .blunetser-banne, it doesn't take up 100% height.
It should be :
.vc_column_container {
display: table-cell;
vertical-align: middle;
}
See updated fiddle here.

Answer 4

you have to give the div with the text in it a line-height if u give the div the line height 300px it will be in the middle
.blunetser-banner {
display: table;
height: 300px;
background: #eee;
line-height: 300px;
}
line-height needs to be the same as the height of the div
http://jsfiddle.net/f72ocv0x/6/