Css to center a <div> with dynamic width.

center-a-div-with-dynamic-width

<div class="example">
    <div class="outer">
      <div id="centeredContent" class="inner">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
      </div>
    </div>
</div>

style

.example {
  width: 960px;
  float: left;
  clear: both;
  margin: 0 0 50px 0;
}

.outer {
  float: left;
  clear: both;
  position: relative;
  left: 50%;
}

.inner {
  position: relative;
  left: -50%;
}

#centeredContent {
  background: #F4F0E4;
  border: 1px solid #C2BEB2;
  padding: 20px;
}

This Css center a <div / > or another Html tag in its parent container, irrespective of its width.