html - 如何水平和垂直对齐到固定位置的 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% 的右侧时发生的向左偏移。