Align a div vertically inside an inline-block - html

Question

I have an unknown amount of divs that will be populated within an inline-block div. There's no problem when there is more than one div as it looks fine, but when there is only one div I want it to be centered in the parent. I want to try to do this without any fixed/absolute positioning and hopefully without using javascript.
In the fiddle you can see the first column, the div with "Put me in the middle" should be in the middle.
http://jsfiddle.net/Lzzyywf2/5/
<div class="inlineb">
<div class="insideInline">Hello</div>
</div>
<div class="inlineb">
<div class="insideInline">Hello</div>
<div class="insideInline">Hello</div>
</div>
.inlineb {
min-height:102px;
display:inline-block;
border:1px red solid;
vertical-align:top;
}
.insideInline {
height:50px;
border:1px solid blue;
}

Answer 1

Try :only-child for .insideInline. This will target the element if there is only one inside the parent. Here's my fiddle.
#wrapper {
}
.inlineb {
min-height:102px;
display:block;
border:1px red solid;
vertical-align:top;
width:126px; /*or whatever value*/
}
.insideInline {
height:50px;
border:1px solid blue;
display:inline-block;
width:37px;/*or whatever value*/
}
.inlineb .insideInline:only-child {
display:block;
margin:0 auto;
}

Answer 2

If you are able to manually add a class for those containers with only one child, this would work:
http://jsfiddle.net/Lzzyywf2/6/
<div class="inlineb one-child">
<div class="insideInline">Hello</div>
</div>
combined with:
.one-child:before {
content: "";
display: block;
height: 25px;
}
If you can't add a class, this will work in IE9+:
http://jsfiddle.net/Lzzyywf2/9/
.insideInline:only-child {
display:block;
margin-top:25px;
}
Credit to the OP for improving on this idea!

Answer 3

Flex box will make your life easier:
.flex-contain{
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width:900px;
height:500px;
background:#000;
align-items:center;
align-content:center;
}
.flex-item {
height:200px;
width:200px;
background:yellow;
margin:0 auto;
}
http://codepen.io/cjthedizzy/pen/vEpyvR