Изменить опорную точку для позиции CSS

Question

Я пытаюсь выложить страницу с помощью div. Я борюсь, потому что точка отсчета до <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, а затем введите squareposition: 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 больше не будет работать.

Answer 2

Помимо установки ширины и высоты на 0, что может иметь некоторые нежелательные последствия, другим возможным решением было бы дать отрицательное левое поле, равное ровно половине полной ширины ящика, а отрицательное верхнее поле равное половине полной высота окна, где полная ширина/высота = ширина/высота + граница + дополнение.

Для коробки в вашей скрипке, которая имеет ширину/высоту 100 пикселей и границы в 1 пиксель, это будет означать добавление

margin-left: -51px; 
margin-top: -51px;