asp.net - 用位置居中花式框：绝对不允许我改变位置

Question

当我点击一个链接时，我有一个弹出框。它在中心区域周围的某个地方打开，但不完全在中间。fancybox 的 css 是：

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

但是，当我有 时position:absolute;，边距设置变为无效。似乎没有任何效果。left: 50px;等将不起作用。有任何想法吗？

当我将绝对值更改为相对值时，fancybox 完全位于我想要的中间位置，但它在底部几乎无法看到 fancybox。

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 */
}