Safari CSS兼容性问题

Question

所以，我正在编写一些支持所有浏览器的CSS，我正在IE，Chrome，Opera，Safari和Firefox上测试它。以下CSS将#signinForm定位在除Safari之外的所有浏览器的页面中心。

#signinForm {
    position: absolute;
    -webkit-position: absolute;
    width: 400px;
    height: 320px;
    left: calc(50% - 200px);
    top: calc(50% - 160px);
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-shadow: 0px 3px 3px -3px #ccc;
    display: block;
}

我需要添加什么才能让CSS将#signinForm置于Safari窗口的中心位置？

Answer 1

您可以使用：

#signinForm {
    position: absolute;
    width: 400px;
    height: 320px;
    left: 50%;
    margin-left: -400px; /*  minus the width of the div */
    background-color: #fff;
    border: 1px solid #ebebeb;
    border-radius: 3px;
    box-shadow: 0px 3px 3px -3px #ccc;
    display: block;
}