CSS：居中块元素时创建不相等的边距答案

【问题标题】：CSS: creating non-equal margins when centering a block elementCSS：居中块元素时创建不相等的边距
【发布时间】：2013-05-20 02:47:18
【问题描述】：

问题如下。我有一个块元素，比如<div> 标签，我想将它居中。我可以设置margin-left: auto; margin-right:auto，问题就解决了。但是，例如，我怎样才能使右边距比左边大两倍呢？

在过去的日子里，在带有框架的 HTML4.01 中，我可以将中间框架宽度设置为 600 像素，将左框架宽度设置为“1*”，将右框架宽度设置为“2*”以获得我想要的布局。那么我该如何对 HTML5 做同样的事情呢？

【问题讨论】：

那不是完全居中，是吗？
左边距：25%； - 你试过吗？
@BoltClock，不，不是。我只是想解释我想要得到什么。
@user466764，是的，我有。这使得左边距等于父宽度的 25%，而不依赖于右边距和元素的宽度。
@MattCoughlin，我认为@cimmanon 与display: table-cell 的解决方案非常好。如果这不是 CSS 的设计目的，那么我应该使用什么？我确定我应该不使用 JavaScript 来处理此类布局问题。

标签： css html layout alignment

【解决方案1】：

这不是一个很好的解决方案，因为它需要 Flexbox 和一个额外的元素，但右侧“边距”是左侧“边距”的两倍：

http://codepen.io/cimmanon/pen/agFzw

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* fix for old Firefox */
  width: 100%;
}

.bar {
  border: 1px solid;
  width: 600px;
  /* optional */
  -webkit-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex: 0 1 600px;
  -ms-flex: 0 1 600px;
  flex: 0 1 600px;
}

.foo:after {
  -webkit-box-flex: 2;
  -moz-box-flex: 2;
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
  display: block;
  content: ' ';
}

.foo:before {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  content: ' ';
}    

<div class="foo">
  <div class="bar">
    Bar
  </div>
</div>

http://caniuse.com/flexbox

如果您对 3 个额外元素没问题，您可以使用 display: table/table-cell 并最大化您的浏览器支持：

http://cssdeck.com/labs/saojg66o

.foo {
  display: table;
  width: 100%;
}

.a, .b, .c {
  display: table-cell;
}

.a {
  width: 10%;
}

.b {
  border: 1px solid;
  width: 600px;
}

.c {
  width: 20%;
}

<div class="foo">
  <div class="a">
  </div>
  <div class="b">
    Foo
  </div>
  <div class="c">
  </div>
</div>

【讨论】：

哇，我不知道table-cell 是这样工作的。非常感谢！

【解决方案2】：

如果给div 一个 % 宽度是可以接受的，这很容易：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

div {width: 40%; height: 600px; background: red; margin-left: 20%; margin-right: 40%;}

</style>

</head>
<body>

<div></div>

</body>
</html>

【讨论】：

那不是问题。如果将margin-left 设置为50% 并将margin-right 设置为25%，则元素的左侧将始终位于其父元素的中间（x 轴为50%，是的）。至少我的 Firefox 甚至没有尝试使这样的边距成比例。
不确定你的意思。我的代码完全符合您的要求，尽管可能不是您想要的方式。如果你想在 div 上固定宽度，你可能需要 JS 来动态计算边距。
是的，很抱歉我忘了说。元素的宽度是固定的。
好的，我添加了另一个答案（而不是更新这个答案。）这是用 JS 做这个的简单尝试。

【解决方案3】：

你可以使用类似的东西：

div {
    position: absolute;
    width: 300px; height: 300px;
    top: 50%; left: 50%;
    margin-top: -150px; margin-left: -150px;
    border: 1px solid black 
}

这将集中您所说的<div>。如果您想要更多或更少的左边距或右边距，只需更改margin-left: -150px; 值。

jsFiddle example

【讨论】：

但这并不能确保左边距是右边距的一半。一旦浏览器宽度发生变化，边距就不会保持比例，这似乎是这里的要求。

【解决方案4】：

由于 div 必须具有固定宽度，因此可能需要 JS 来实现这一点。我是 JS 新手，所以这可能是糟糕的代码，但无论如何它似乎可以完成这项工作：http://cdpn.io/LIizc

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
body {margin: 0; padding: 0;}
div {width: 600px; height: 600px; background: red; }
</style>

</head>
<body>

<div id="test"></div>

<script>
function resize(elem){
  var windowWidth  = document.documentElement.clientWidth,
      remainder = windowWidth - elem.clientWidth;
  elem.style.marginLeft = remainder * 1/3 + "px";
}

var div = document.getElementById("test");
window.addEventListener('resize', function(){
  resize(div);
}, false);
resize(div);
</script>
</body>
</html>

【讨论】：