CSS Centering - div with inline buttons that can be at top and bottom of screen

CSS Centering - div with inline buttons that can be at top and bottom of
screen

I'm trying to make a control panel which has a couple of buttons that have
to be inline. When the width of the window is large the buttons are
centered at top of the screen and when the width of the windows is small
they are centered at the bottom of the screen. During some instances I
remove some of the buttons but the div still has to be centered.
I have to use absolute positioning, right?
When the control panel is at top I should have
#control-div {
position: absolute;
top: 0;
}
And when the control panel is at the bottom it should be
#control-div {
position: absolute;
bottom: 0;
}
Here comes the problem. I want the div to be centered. I can't know what
the width of the div is since some buttons might be removed or added. It
must always be centered. So what I've tried was to use two divs
#outer-div {
position: absolute;
left: 50%;
}
#control-div {
position: absolute;
left: -50%
}
This works for arbitrary widths of the control div. But now the problem is
that the buttons are not inline anymore. So what's the solution?
Here is a fiddle of what I'm trying: http://jsfiddle.net/xe8EW/2/