Question

Recently, a client asked that his site be percent-based rather than pixel-based. The percent was to be set to 80%. As you guys know, it is very easy to center the container if it is pixel-based but how do you center a percent-based main container?

#container
{
  width:80%;
  margin:0px auto;
}

That does not center the container 🙁

Answer 1

The margin property supports percentage values:

margin-left: 10%;
margin-right: 10%;