以百分比为基础的div为中心

Question

最近，一位客户要求他的网站是基于百分比的，而不是基于像素的。百分比设定为80％。众所周知，如果容器是基于像素的，那么容器就很容易居中，但是如何将基于百分比的主容器集中在一起呢？

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

这不会使容器居中:(

Answer 1

保证金属性支持百分比值：

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

我知道这听起来很疯狂但是如何在jQuery中获取宽度然后将其重置为像素值呢？

或者在jQuery中将宽度偏离页面宽度？

他想要一个基于百分比的布局，这很奇怪。

哦，最后但并非最不重要的是，它周围有两个10％宽的div;）

Answer 5

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

“容器”的元素父元素必须是位置相对或绝对

例如：

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

Answer 6

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