以位置为中心的花式盒:aboslute不让我更改位置

Question

我有一个fancybox，当我单击链接时会弹出。它在中心区域周围开放，但是中间不在。Fancybox的CSS是：

#fancybox-wrap {
    position:absolute;
    /*padding: 20px;*/
    z-index: 1101;
    outline: none;
    display: none;
    margin: 0px auto 0px auto;
}

但是，当我拥有position:absolute;时，边距设置将变得无效。似乎没有任何作用。left: 50px;等无法正常工作。有什么想法吗？

当我将绝对更改为相对时，花式盒在我想要的中间处于中间，但是它在底部几乎将花式盒绘制出来。

Answer 1

当您绝对定位某些内容时，您会根据顶/底部和左/右属性告诉浏览器所需的位置。

绝对位于屏幕中心：

#fancybox-wrap {
    position:absolute; /* want it positioned absolutely relative to parent */
    width:500px;       /* fixed width of 500px */
    top:50px;          /* 50px down from the top of the screen */
    left:50%;          /* positioned in the middle of the screen */
    margin-left:-250px;/* use a negative margin of half the fixed width */
}