title: Getting a CSS element to automatically resize to content width, and at the same time be centered
body: <p>I have a CSS element, with a border around it, that could have one or multiple boxes in it, so the width of the entire div changes depending on how many boxes are present inside of it.  However, I want this whole div to be centered on the screen.</p>
  
  <p>Usually, to center things, I just use:</p>
  
  <pre><code>margin-left: auto;
  margin-right: auto;
  </code></pre>
  
  <p>But, this time, I have to either float the element or make it inline-block so the size of the div will be resized to the content, and if I do that, the margin-left and margin-right auto does not work, it always just stays on the left side of the screen.</p>
  
  <p>Currently I have:</p>
  
  <pre><code>#boxContainer {
      display:inline-block;
      clear:both;
      border:thick dotted #060;
      margin: 0px auto 10px auto;
  }
  </code></pre>
  
  <p>I also tried with <code>float: left</code> instead of <code>display: inline-block</code>.</p>
  
  <p>Does anyone know of a good way to both center a div and allow it to be resized to content simultaneously?  Any help would be greatly appreciated.</p>