将 div 对齐到中心，然后将其向左移动答案

【问题标题】：Align a div to the center and then move it left将 div 对齐到中心，然后将其向左移动
【发布时间】：2013-06-13 05:46:13
【问题描述】：

我正在使用下面的代码来制作一个 div...

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

background:black;

padding:20px;

position:fixed;

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

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

【问题讨论】：

【解决方案1】：

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

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

html:

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

css:

#wrapper {
  padding: 20px;
}

【讨论】：

【解决方案2】：

使用

box-sizing:border-box;

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

【讨论】：