Horizontal alignment of unknown div width - css

Question

I would like to align div inside parent div to center horizontally for div with unknown width and dynamic content (will wary from use case to use case.
I have read that margin: auto; usually is usually solution here, but it requires set of width which is unknown for me compile-time. text-align: center does't work for div inside parent div.
Fiddle example
Here is a Fiddle example.
My two questions
I would like the three circles to be aligned to the middle. Number of circles can vary from zero to many.
Another related questions is how I can make the progress bar have a minimum width (for instance when having only one, two or three steps) and strech to right and left when adding more steps? Here is (very bad) illustration in Paint.
As a note I would like this to work for IE 8 as well.

Answer 1

Do you want something like this? DEMO
.progressbar{
top: 0;
position: fixed;
background-color: #00bbee;
width: 100%;
height: 45px;
left: 0;
text-align:center // added this line for centering the content
}
.steps {
display: inline-block; // and this line for auto-aligning center your child elements
}

Answer 2

Your first question can be solved by applying
text-align: center to the top wrapper and changing the display of the steps wrapper to inline-block
Regarding the second question, I'm not sure that this is exactly what you meant - but it can be solved by moving the line out of the steps wrapper and positioning it at the vertical center of the whole bar using
position: absolute;
height: 2px;
margin-top: -1px;
top: 50%;
left: 0:
width: 100%;
background-color: black;
Example in this fiddle
note that I also changed your html because there was some unnecessary tags there
For IE8 support check out this question (the only problematic issue here is the use of inline-block