css模拟一个简单的条形图

我正在尝试用css创建它，但很难让它正确对齐。我只是想填充一个从div中间点开始，高度等于百分比的方框。如果超过某个百分比，我希望它在填充的div中。猜测这并不难，但我似乎无法理解。主要是如何让填充框从一半开始向下填充，并根据正负值向上填充或向下填充

我将感谢任何帮助

jsbin链接

---

您可以为负百分比填充框元素添加一个类，并将顶部位置设置为100px，以便元素顶部从容器的中点开始，然后为正百分比填充框将顶部位置设置为负剩余百分比：

.col-sm-3{ 边框：1px000； 高度：200px； } .加油箱{ 背景色：213F5E； 宽度：100%； 位置：绝对位置； 最高：50%； 左：0； } .填充框.负片{ 顶部：100px； } .加油箱1{ 身高：6%； 转化率：translateY-94%； } .加油箱2{ 身高：41%； } 12% -82%

---

你能把你的密码输入吗？谢谢。我做了一些调整来改变这个百分比，但是谢谢你让我达到这个目标。很高兴你弄明白了，很乐意帮忙！

.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>