Div水平中心没有绝对

Question

我有一点问题。

我有一些元素的图像，在其他divs内的容器div。 喜欢的东西：

<div id="container"> 
    <div id="draggable"> 
     <img src="something"> 
    </div> 
</div> 

我需要verticaly中心集装箱，但我不能使用top：-healfHeight;利润率：50％;因为那么jQuery UI的拖动将无法正常工作。那么我怎样才能解决这个问题呢？ :(

Answer 1

var wh = $(window).height(); 
var ch = $('#container').height(); 
var mt = (wh - ch)/2; 
$('#container').css('margin-top', mt) 

http://jsfiddle.net/zJrKh/1/

Answer 2

尝试父容器设置为position: relative，和你想要的元素到中心来margin: auto。

Answer 3

我不知道如何jQuery的定位工作，但如果你的答案只涉及CSS这些div的位置，那么：

使容器div 位置：绝对; 顶部：50％; 左：50％;

那么你的 '拖动' DIV需要这种定位： 位置：亲属; top：（ - div的总高度的一半）; left：（ - div的宽度的一半）;

例如，如果您的可拖动div是100px×100px，那么顶部将是-50px，左侧将是-50px。

Answer 4

<div id="container"> 
    <div id="draggable"> 
     <img src="something"> 
    </div> 
</div> 

坊间确保父宽度比拖动元素宽，然后尝试：

#draggable{display:block;margin:0 auto} 

编辑，对不起，刚刚意识到你需要它垂直居中。

尝试：

#container{display:table-cell} 
#draggable{vertical-align:middle}