How to vertically align text in the middle of two divs - css

Question

I'm trying to vertically align + symbol in the middle of the boxes div however I can't get it working. What am I doing wrong? I would also like to avoid using tables. Thanks ( I also attached codepen link)
<div class="boxes">
<div class="boxes_box">
</div>
<div class="boxes_plus">+</div>
<div class="boxes_box">
</div>
</div>
CSS
.boxes {
height: 250px;
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
}
.boxes_plus {
display:inline-block;
height:250px;
line-height:250px;
vertical-align:middle;
}
http://codepen.io/anon/pen/aoiGm

Answer 1

use this:
.boxes {
height: 250px;
display:table;/*Add display table*/
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
display:table-cell;/*display table cell here is not necessary*/
}
.boxes_plus {
display:inline-block;
height:250px;
line-height:250px;
vertical-align:middle;
display:table-cell;/*Add display table cell*/
}
fiddle
Alternative you can simple remove line-height:
.boxes_plus {
display:inline-block;
height:250px;
/*line-height:250px;*/
vertical-align:middle;
}
fiddle

Answer 2

<style>
.boxes {
height: 250px;
display:table;
}
.boxes_box {
width: 250px;
height: 250px;
display:table-cell;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
</style>

Answer 3

For the smallest change from what you have, change .box_plus's vertical-align to top.
http://codepen.io/jwhitfieldseed/pen/FeJco
Explanation: line-height puts the "+" text in the vertical center of .boxes_plus.
The text is already centred vertically in its container, so you now need to make the top of .boxes_plus align with the top of .boxes_box.

Answer 4

Please update your css as follow
.boxes {
height: 250px;
display: table
}
.boxes_box {
width: 250px;
height: 250px;
display:table-cell;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}
http://codepen.io/anon/pen/crBea

Answer 5

Try this:
DEMO
.boxes {
height: 250px;
display:table;
}
.boxes_box {
width: 250px;
height: 250px;
display:inline-block;
background:#000;
}
.boxes_plus {
display:table-cell;
height:250px;
line-height:250px;
vertical-align:middle;
}