css - 将一个div居中对齐，然后向左移动

Question

我正在使用以下代码制作一个 div...

left:50%; 
top:0px;
width:100%; 
margin-left:-50%;

background:black;

padding:20px;

position:fixed;

但问题是 div 上有一个填充，所以我需要额外添加 20px 以使 div 居中对齐。有没有办法做到这一点？我尝试了类似 margin-left:-(50%+20px); 的方法，但这在 CSS 中不起作用...

有人知道我该怎么做吗？谢谢!

Answer 1

box-sizing 会起作用，但不幸的是它不适用于旧浏览器(ie7 和更早版本)。 http://caniuse.com/css3-boxsizing

最好的做法(如果针对所有浏览器)是删除填充并添加一个仅包含该填充的子包装器。

html:

<div id="centered">
  <div id="wrapper">
    [...]
  </div>
</div>

CSS:

#wrapper {
  padding: 20px;
}