html - CSS/HTML : centering absolute element in browser window regardles of parent position (parent also absolute)

Question

在浏览器窗口中水平居中元素(div，但那不是重点)时出现问题。与其父元素相比定位它没有问题，但希望它摆脱这个 HORIZONTALLY - 但仍然保持与它的垂直关系。也许我要求太多了？ :-) 我可以使用 position:fixed 来做到这一点，但是元素会卡住在浏览器中的一个位置，而不管...

 #parent li {
    display:inline;
    text-align:center;
    float:left;
    position:relative;
    padding: 12px 10px 4px 10px;
    margin-right:10px;
    height:28px;
    border:none;

    }
.child {
    margin:16px 0px 0px 0px;
    float:left;
    z-index: 100;
    position:absolute;
    text-align:left;
    padding:0;
    border:1px solid #BBBBBB;
    border-top:none;
    line-height:14px;
}

我也可以换个方式问:这就是我要横向的:

.child { 
margin:16px 0px 0px 0px; 
float:left; 
z-index: 100;
left: calc(50% - 400px); 
left: -moz-calc(50% - 400px); 
left: -webkit-calc(50% - 400px); 
position:fixed; 
top:inherit; 
text-align:left; 
padding:0; 
border:1px solid #BBBBBB; 
border-top:none; 
line-height:14px;
}

不管父级如何，它都留在中间。伟大的。但是 - 当您在页面上向下滚动时，如果 child 可见，它会保持不变，而其余内容会滚动。而且，如果您滚动了一点，因此父级不在其顶部的原始位置，则子级将不会与父级对齐，而是从顶部出现在父级最初所在的位置，以像素为单位……这不是最佳的…… :-/

Answer 1

为您在 div 中的位置提供一些(顶部，底部)属性。

#parent li {

position:relative;
top:50px;
left:50px;
}

.child {

position:relative;
top:50px;
left:50px;
}