
Приблизительно как на схемке справа.
О размерах элемента и его контейнера ничего не известно.
Вот пример страницы как я это сделал. На странице три больших div’а, в среднем помещен выравнивающийся по видимому центру элемент. Проверял в IE 6 & 7 (не моя прихоть – задача такая).
Интересно узнать как можно сделать проще и надёжнее? И вот в Opera 9.5, например, не работает. А хотелось бы большей универсальности кода.
Относительное (relative) позиционирование поместит элемент в центр контейнера. При этом если середина контейнера выходит за видимые пределы, то элемент не будет видно (как на рисунке). Способы позиционирования fixed и static совсем не подходят.
Я использовал режим absolute. И через прописал свойства left и top в виде css expression:
.divVisibleCenter
{
position:absolute;
top: expression(GetVisibleCenterY(this));
left: expression(GetVisibleCenterX(this));
}
Вычисления координат x и y элементов вынесены в отдельные JavaScript-функции GetVisibleCenterX и GetVisibleCenterY соответственно:
function GetVisibleCenterX(item)
{
var c = item.parentNode;
var s = c.getBoundingClientRect();
var right = c.document.documentElement.offsetWidth — ((s.right<c.document.documentElement.offsetWidth)?c.document.documentElement.offsetWidth-s.right:0);
var left = c.offsetLeft+((c.offsetLeft+s.left>c.offsetLeft+right)?0:-s.left);
var offs = ((c.offsetLeft > left)?(c.offsetLeft — left):0);
var width = right — offs;
return left+offs+(width/2) — item.clientWidth/2;
}
function GetVisibleCenterY(item)
{
var c = item.parentNode;
var s = c.getBoundingClientRect();
var bottom = c.document.documentElement.offsetHeight — ((s.bottom<c.document.documentElement.offsetHeight)?c.document.documentElement.offsetHeight-s.bottom:0);
var top = c.offsetTop+((c.offsetTop+s.top>c.offsetTop+bottom)?0:-s.top);
var offs = ((c.offsetTop > top)?(c.offsetTop — top):0);
var height = bottom — offs;
return top+offs+(height/2) — item.clientHeight/2;
}