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 中不起作用......

有谁知道我该怎么做？谢谢！

score 3 · Accepted Answer

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

最好的办法（如果针对所有浏览器）是删除填充并添加仅具有该填充的子包装器。

html:

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

CSS：

#wrapper {
  padding: 20px;
}

score 1 · Accepted Answer

利用

box-sizing:border-box;

因此在计算宽度时包括填充；干杯
见rec：http ://www.w3.org/TR/css3-ui/#box-sizing0

2 回答 2