title: CSS Centering - div with inline buttons that can be at top and bottom of screen
body: <p>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.</p>
  
  <ol>
  <li>I have to use absolute positioning, right?</li>
  </ol>
  
  <p>When the control panel is at top I should have</p>
  
  <pre><code>#control-div {
      position: absolute;
      top: 0;
  }
  </code></pre>
  
  <p>And when the control panel is at the bottom it should be</p>
  
  <pre><code>#control-div {
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>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</p>
  
  <pre><code>#outer-div {
      position: absolute;
      left: 50%;
  }
  
  #control-div {
      position: absolute;
      left: -50%
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>Here is a fiddle of what I'm trying:
  <a href="http://jsfiddle.net/xe8EW/2/" rel="nofollow">http://jsfiddle.net/xe8EW/2/</a></p>