如何在一個div內彈出一箇中心？

我發現了一些關於如何在洞屏幕中居中彈出div的解決方案，但我需要將它居中（它的垂直和水平方向）在其父div中。彈出窗口沒有固定大小，它們是相對於父div的大小。我還沒有發現任何關於此事的信息，我自己也做不到。所以如果你有任何想法請幫助。如何在一個div內彈出一箇中心？

這裏是我的代碼：http://jsfiddle.net/crXCz/

<div id="container" style="width: something; height: something;> some text <br> some text  
<div class="popup"></div> 
</div> 


div.popup { 
    height: 95%; 
    width: 95%; 
    border-color: #d3d7cf; 
    border-width: 2px; 
    border-style: solid; 
    border-radius: 10px; 
    background-color: #f3f3f3; 
    z-index: 1; 
}

來源

2012-12-23 balping

你必須給我們一些代碼才能使用。 – sachleen

這可能對您有用：http://stackoverflow.com/questions/11332414/simplest-vertical-alignment-we-can-think-of – unclenorton

看看http://jsfiddle.net/EjV4V/27/ –

我們需要了解你的文件的代碼。但根據我的理解，你想要中心div元素。將div元素的位置設置爲相對位置，將主容器的位置設置爲絕對位置，並將以下CSS代碼添加到彈出框中。

.popup{ 
position:absolute; 
top:50%; 
height: <your value in percentage>; 
margin-top: (negative value of your height, divided by 2); 
width:<your value in percentage>; 
left:50%; 
margin-left: (negative value of your width, divided by 2); 
}

來源

2012-12-23 18:57:10

這一個將我的彈出窗口居中在屏幕上，而不是在父div中，因爲它使用絕對位置。這隻適用於固定尺寸 – balping

考慮添加小提琴，以便我們瞭解您的情況。而且我告訴過你要將popup元素的位置設置爲相對的，而將主元素的位置設置爲絕對的！ –

如果我理解你正確，你的兩個元素都是高度動態的。我通常做的是添加一些JavaScript。（假設jQuery）

function verticalAlign(el) { 
    // Calculate marginTop by taking parents height minus element height 
    // and divide the value by two 
    var marginTop = (el.parent().height() - el.height())/2; 

    // Apply the top margin to the element 
    el.css('margin-top', marginTop); 
} 

verticalAlign($('.verticalAlign'));

來源

2012-12-23 19:02:18 JimmyRare

你說得對，我的兩個元素在高度和寬度上都是動態的 – balping

如何在一個div內彈出一箇中心？

回答

相關問題