How to center a div above another div all the time - html

Question

This scenario is somewhat different than the traditional margin:0 auto.
I try to center a div above another div, while both of them are in the same div (no need to look like they are in the same div, because blue box will be bigger than black box on top)!
I have create a fiddle of what I got so far, and I did align the top div into sort center, but its center in a sense of top left corner of each div. I want to center in a sense that, the blue box is RIGHT above the blackbox, but the bluebox's middle line is aligned with the middleline of the blackbox. So something like this
|______|
|__|
top box blue, bottom box black
But I just can't think of a way to do that.
http://jsfiddle.net/adamchenwei/nay8fe5q/
HTML
<div class="blockcontainer">
<div class="blockcenterbox">
<div class="blocktop">abc</div>
</div>
<div class="blockbottom"></div>
</div>
CSS
.blockcontainer {
margin:0 auto;
width:25px;
background-color:#00CC66;
}
.blocktop {
width:100px;
background-color:#6699FF;
height:50px;
}
.blockcenterbox {
width: .1px;
height: 5px;
background-color: yellow;
margin: 0 auto;
position: relative;
float: none;
}
.blockbottom {
width:25px;
height:25px;
background-color:black;
}

Answer 1

Is this what you're trying to achieve?
.blue {
width: 200px;
height: 100px;
background-color: blue;
}
.black {
width: 150px;
height: 80px;
background-color: black;
margin: 0 auto;
}
.blockcontainer {
margin: 0 auto;
width: 200px;
}
<div class="blockcontainer">
<div class="blue"></div>
<div class="black"> </div>
</div>

Answer 2

Try this working link at plnkr:
http://plnkr.co/edit/OaQBWxlIfa2fVvanKKEl?p=preview
Hope it helps!!!
HTML
<div class="blockcontainer">
<div class="blockcenterbox">
<div class="blocktop">abc</div>
</div>
<div class="blockbottom"></div>
</div>
CSS
.blockcontainer {
width:200px;
height:200px;
background-color:#00CC66;
overflow:hidden;
}
.blocktop {
width:100px;
background-color:#6699FF;
height:50px;
}
.blockcenterbox {
width: 100px;
height: 50px;
background-color: yellow;
margin: 0 auto;
}
.blockbottom {
width:25px;
height:25px;
background-color:black;
margin: 0 auto;
}