Flex Styling Made Easy: Centering Divs Horizontally And Vertically

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>