html - 如何水平和垂直对齐固定位置的 div？

Question

<div id="someid">some text here</div>

CSS...

#someid{position: fixed; width: 500px; height: 30px;}

我想绝对居中定位到水平和垂直于窗口？

Answer 1

#someid{
position: 
fixed; 
width: 500px; 
height: 30px; 
right:50%; 
margin-right:-250px;
}

负边距是为了修复当浏览器认为 div 的右侧距离浏览器窗口右侧 50% 时发生的偏移。

要使其垂直居中，您可能想尝试对其垂直位置进行相同的操作(这里不能保证，因为我以前没有做过)。

例如:

top:50%;
margin-top:-15px;

编辑更详尽的解释:当#someid 被放置在距离右侧 50% 的位置时，它的位置使其距离父级的右边界为其父级总宽度的 50%。但是，这不是从#someid 的中心到其父元素的右边界进行测量，而是从#someid 的右侧到其父元素的右侧进行测量。当然，这并没有完全居中#someid，它仍然偏移了一半的宽度。

这就是我们使用负边距来抵消它的原因。负边距需要是#someid 宽度的一半，以弥补当我们将它放在距其父元素右侧 50% 的右侧时发生的向左偏移。