居中模態，或定位時的div

Question

看到這個Fiddle，我怎麼能在父母和孩子沒有固定寬度和高度的藍色div？

這是張貼在SO

<div class="parent"> 
<div class="child"> 
</div> 
</div> 

更新

這些定位元素，我希望孩子在屏幕的中央。

更新2

見它爲中心here，但我不能在父母子女都不固定使用寬度也不高。我需要定位元素，因爲我需要它們超越其他元素。

Answer 1

要居中的div，你只需要添加此屬性：

margin-left: auto; 
margin-right: auto; 

或一個以上精簡版（假設0像素的頂部和底部邊距）：

margin: 0px auto; 

這假定對於要居中的元素，您有某種寬度值，無論是固定還是百分比。你不應該需要父母的任何東西來決定孩子的利潤。

Answer 2

試試這是在寬度的中心顯示。

<div class="parent"> 
<div class="child"> 
</div> 
</div> 
<style type="text/css"> 
.parent{ 
} 
.child{ 
    background: none repeat scroll 0 0 lightblue; 
    height: 50px; 
    margin: 0 auto; 
    width: 150px; 
} 
</style> 

Answer 3

邊距：-50％;/*爲什麼這需要父母的寬度？ */

這是因爲你的父母div有position: fixed和您的孩子div有position: absolute以來的絕對位置元素相對於具有靜態以外的位置，第一父元素進行定位。

所以你的孩子的div將採取保證金頂部和利潤留給等於這是-50% * 150 = 75px

Answer 4

你的父母寬度的-50%價值，我認爲這可以解決你的問題，但是這需要JQuery[.width()]。

.parent{ 
    position: fixed;  
    /* I can't use static width nor height, TO DELETE(try changing this)*/ 
    width: 500px; 
    height: 400px; 
    background: red;  
} 

.child{ 
    display: inline-block; 
    position: absolute; 
    /*Simulate width and height, these are actually calculated by content*/ 
    width: 100px; 
    height:50px; 
    background: lightblue; 
} 

的JQuery的onLoad：JSFiddle]

$(function changePostion() { 
    var s = $(".parent").width(); 
    var e = $(".child").width(); 
    var d= (s-e)/2; 
    $(".child").css({"left":d}); 
    var sh = $(".parent").height(); 
    var eh = $(".child").height(); 
    var dh= (sh-eh)/2; 
    $(".child").css({"top":dh});  
}); 

這article是用於中心定位的HTML屬性的最佳教程。不使用JQuery可能有更好的方法。

Answer 5

動態模態可能是世界上最大的難題。你需要JS來改變高度和寬度。你可以使用插件嗎？如果有的話，這裏有一些很好的選擇Twitter的引導程序有一個非常容易設置的模式，但通過ajax和iframe加載div非常具有挑戰性。你必須選擇一個或另一個。 simplemodal（http://www.ericmmartin.com/projects/simplemodal/）很好，但你仍然需要自己做很多工作。它適用於iframe和ajax內容。