CSS将视口中的元素垂直和水平居中，并使其响应交叉浏览器

Question

css使div居中水平和垂直

.centerd-element
{
    top: 0; left: 0; bottom: 0; right: 0;
    position:absolute;
    margin:auto;
    background-color:#FFFFFF;
    z-index:150;
    /*max-width and max-height should be dynamic*/
    max-width:500px;
    max-height:200px;
}

除了ie8之外，所有主流浏览器都可以正常工作，ie8元素被粘贴到视口的顶部。

我怎样才能让它在ie8中运作。

Answer 1

这适用于所有浏览器：

.centerd-element {
    position:absolute;
    display:inline-block;
    background-color:black;

    top:50%;
    left:50%;
    height:200px;
    width:500px;
    margin:-100px -250px;
}