Alignment issues with div inside div - html

Question

I'm trying to create a progress bar and i have a problem aligning div inside a div.
css:
.outer {
width: 20px;
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display:inline-block;
}
.inner {
width: 100%;
overflow: hidden;
position: absolute;
border-top-width: 0;
background-image: url('/images/progressBar2Red.png');
background-size: 20px;
bottom: 0;
height: 0%;
display:inline-block;
}
.progress{
display: inline-block;
align-items:center;
}
html:
<div class="progress">
<label class="progNum">20</label><br />
<div class="outer">
<div class="inner"></div>
</div>
</div>
For some reason the inner div is not exactly in the middle of the outer div. This is how it looks:
How can i put the inner div exactly in the middle of the outer div?

Answer 1

You made this .inner element of position: absolute. Just add left: 0; and right: 0; to the .inner CSS rules.
Divs are of 100% width by default, never set a div to a 100% width unless you absolutely need it... for some reason.
EDIT
Ok I actually do not understand what DOES NOT work for you. Check this JSFiddle. I think the problem is your background.

Answer 2

Give the inner margin: 0 auto;

Answer 3

JSfiddle Demo
HTML
<div class="progress">
<label class="progNum">20</label>
<div class="outer">
<div class="inner"></div>
</div>
</div>
CSS
.outer {
height: 190px;
border: 2px solid #ccc;
overflow: hidden;
position: relative;
border-radius: 4px;
}
.inner {
width: 100%;
position: absolute;
border-top-width: 0;
background-color: red;
bottom: 0;
width: 100%;
height:20px; /* or anything else you want */
border-radius: 4px;
}
.progress{
display: inline-block;
width: 20px; /* sets width of the whole bar - everything else can be 100% */
}
.progNum {
text-align: center;
display: block;
}