Имеем:
<div id="parent"></div>
<div id="child"></div>
Задача расположить любой элемент внутри любого другого по середине вертикально и горизонтально. Элементы могут размещаться по странице хоть где - не обязательно по середине.
Решение у меня получилось такое:
function center (parent, child){
$(parent).append($(child).remove());
$(child).css({
position:'relative',
left: ($(parent).width() - $(child).outerWidth())/2,
top: ($(parent).height() - $(child).outerHeight())/2
});
};
Это мы создали функцию которая вырывает child и вставляет его в parent. Затем делает child координаты зависимыми от рабочей области parent.
Затем где удобно в коде вставляем:
$(function() { center('#parent','#child'); });
$(window).resize(function() { center('#parent','#child'); });
Это запускает саму функцию и приклеивает её ресайзу окна.
Дополнительные плюсы такого метода - если есть не один child и их надо расположить как-то вокруг первого элемента, то функцию легко допилить - изменив формулы размещения в зависимости от ещё одного или нескольких параметров.
Например, если надо накидать элементы слева и права от центрального c отступом gap:
function center (parent, child, position, gap){
$(parent).append($(child).remove());
$(child).css({
position:'relative',
left: (($(parent).width() - $(child).outerWidth())/2)-($(child).outerWidth()+gap)*position,
top: (($(parent).height() - $(child).outerHeight())/2)
});
};
Просьба покритиковать и обмозговать, как ещё можно лучше сделать.