Центрирование на основе процента div

Question

Недавно клиент попросил, чтобы его сайт был основан на процентах, а не на пикселях. Процент должен был быть установлен на 80%. Как вы, ребята, знаете, очень легко центрировать контейнер, если он основан на пикселях, но как вы центрируете основной контейнер на основе процентов?

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

Это не центрирует контейнер: (

Answer 1

Свойство margin поддерживает процентные значения:

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

Answer 2

#container
{
  width:80%;
  position:absolute;
  margin-left:-40%;
  left:50%;
}

или просто

#container
{
  width:80%;
  margin-left:10%;
}

Answer 3

Удалите значение px на полях, вот так:

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

Answer 4

position: absolute;
width: 80%;
left: 0;
right: 0;
margin: 0 auto;

Answer 5

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

И родительский элемент «контейнера» должен быть относительным или абсолютным положением

например:

body{position:relative;}
#container { width: 80%; margin: 0 auto; position relative; }

Answer 6

Я знаю, это звучит безумно, но как насчет получения ширины в jQuery, а затем сброса ее, чтобы она была в пикселях?

Или исходя из ширины страницы в jQuery?

Это довольно странно, что он хочет, чтобы процент основывался на макете.

Да, и не в последнюю очередь, два 10% ширины вокруг него;)