css to mimic a simple bar chart - css

Question

I am trying to create this with css and having a hard time getting it to align correctly. I am just trying to fill a box that starts at middle point of a div and have its height equal to the percentage. If it gets over a certain percentage I want it to be inside the filled div. Guessing this is not that hard but I can't seem to figure it out. Mainly how to get the fill box to start half way down and either fill up or down depending on positive or negative.
I would appreciate any help.
jsbin link
http://jsbin.com/lexifetuja/edit?html,css,js,output
.col-sm-3 {
border: 1px solid #000;
height:200px;
}
.fill-box {
background-color: #213F5E;
width:100%;
position: absolute;
top: 50%
}
.fill-box1 {
height: 6%;
}
.fill-box2 {
height: 41%;
}
<div class="container">
<div class="row">
<div class="col-sm-3">
<span class="percentage text-left">12%</span>
<div class="fill-box fill-box1"></div>
</div>
<div class="col-sm-3">
<span class="percentage text-left">-82%</span>
<div class="fill-box fill-box2"></div>
</div>
</div>
</div>

Answer 1

You could add a class for negative percentage fill-box elements and set the top position to 100px (so that the top of the element starts at the half way point of the container) and then for the positive percentage fill-box just set the top position to negative the remaining percentage:
.col-sm-3 {
border: 1px solid #000;
height:200px;
}
.fill-box {
background-color:#213F5E;
width:100%;
position:absolute;
top:50%;
left:0;
}
.fill-box.negative {
top:100px;
}
.fill-box1 {
height:6%;
transform:translateY(-94%);
}
.fill-box2 {
height:41%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-3">
<span class="percentage text-left">12%</span>
<div class="fill-box fill-box1"></div>
</div>
<div class="col-sm-3">
<span class="percentage text-left">-82%</span>
<div class="fill-box fill-box2 negative"></div>
</div>
</div>
</div>