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

Question

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

...的CSS

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

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

Answer 1

虽然您的位置为fixed，但您无法相对定位div。您必须通过javascript计算顶部和左侧值。你可以写下这个水平居中位置：

width: #SOMEWIDTH#px;
margin: 0 auto;

要使边距位于div的中心，必须设置width属性。 自动余量不会影响垂直位置。

Answer 2

#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％的右边时发生的左边偏移。