更改 CSS 位置的参考点

Question

我正在尝试使用 div 布局页面。我很挣扎，因为 a 的参考点<div>似乎是左上角。这没问题，直到 div 改变形状。那么，左上角的位置就不合适了。

如果您看到http://jsfiddle.net/jdb1991/8Xb7L/，您将获得一个实例

#point { position: absolute; top: 50%; left: 50%; }
#square { border: solid black 1px; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; }

<div id="point">+</div>
<div id="square"></div>

有没有办法使用 CSS 将正方形的“参考点”更改为中心或不同的角？

Answer 1

你需要把point里面的square，然后给square position: relative。该点的位置将相对于正方形（即left距正方形左边缘的距离。）

#point { position: absolute; top: 50%; left: 50%; }
#square { position: relative; border: solid black 1px; height: 100px; width: 100px; position: absolute; top: 50%; left: 50%; }

<div id="square">
  <div id="point">+</div>
</div>

如果要使用不同的角进行定位，请使用right或bottom属性而不是left或top。

如果您想从中心定位，请按照我对正方形的建议进行操作，但给它一个0宽度和高度。现在，正方形将位于中心，并且该点相对于它定位。显然你失去了宽度和高度，因此使用百分比left和top将不再起作用。