Easy way to center variable width divs in CSS

Question

I\'m trying to center a Div that will have varying width\'s (based on content of a website).

I read about a relative positioning technique here:

http://www.t

Answer 1

Now with flex-box you can easily achieve this with justify-content: center;.

#container{
  background: gray;
  display: flex;
  justify-content: center;
}

  

    This is a centered div This is a centered div This is a centered div This is a centered div
  

This can also be achieved by applying margin: auto to the containers child selector #container>*.

#container{
  background: #c7c7c7;
}
#container>*{
  margin: auto;
}

  

    This is a centered div This is a centered div This is a centered div This is a centered div
  

Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.