使用margin auto，在垂直和水平方向上居中div

Question

我正在尝试使用margin auto在窗口中央显示一个块。

我的代码是

<div class="centre-element"> This box is coming at the center of the window. </div>

CSS

.centre-element{
    width: 200px;
    height: 100px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

这适用于我测试过的所有浏览器，IE7除外。对此有什么帮助吗？

感谢任何帮助。

Answer 1

您无法使用div垂直居中margin: auto，但您可以尝试这样做：

.centre-element {
  top: 50%;
  margin-top: -50px; /* height/2 */
}

修改

这是一个例子： http://jsfiddle.net/ZD432/

Answer 2

.centre-element{
   width: 200px;
   height: 100px;
   margin: auto;
   padding: auto;    
}