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}