如何使用CSS将div放在浏览器的中心？

如何仅使用CSS 在纵向和横向上将div放在浏览器的中心？

确保它也适用于IE7.

如果一切都失败了,我们可能会使用JavaScript,但最后一个选择.

1> James..：

---

HTML:

... content ...

CSS:

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}

---

@Samir:我建议你尝试将一个盒子垂直放在一个可能会增加高度的包含块中,然后重新审视你的评论.它并不像听起来那么容易,因为垂直定位和高度是当前CSS盒模型最大的缺点之一.其中很多网站如ALA致力于解决CSS无法充分解决的"垂直"问题.

---

因为它抵消了div的大小.top和left设置为50%会使元素的顶部和左侧位于页面的中间,而不是元素本身.负边距恰好是元素大小的一半,并构成差异,因此元素本身居中,而不仅仅是其顶部和左侧.

2> jrista..：

---

最简单的解决方案就是使用自动边距,并为div赋予固定的宽度和高度.这适用于IE7,FF,Opera,Safari和Chrome:

HTML:

  
...

CSS:

body { width: 100%; height: 100%; margin: 0px; padding: 0px; }

.centered
{
    margin: auto;
    width: 400px;
    height: 200px;
}

编辑!!对不起,我刚刚注意到你在垂直方向说...顶部和底部的默认"自动"边距是零...所以这只会水平居中.垂直和水平定位的唯一解决方案是使用负边距进行捣乱,如接受的答案.

3> Rony..：

---

margin: auto;

4> M98..：

---

试试这个

#center_div
{
       margin: auto;
       position: absolute;
       top: 0; 
       left: 0;
       bottom: 0; 
       right: 0;
 }