How can You horizontally center an element?

With flex it is very easy to style the div horizontally and vertically centered.

#centered {  
  border: 0.05em solid black;
}

#main {
  border: 0.05em solid red;
  width:100%;
  display: flex;
  justify-content: center;
}

<div id="main">
  <div id="centered">Foo foo</div>
</div>