如何將div放置在屏幕中央？

Question

實際上在當前視圖的中心，高於所有其他對象。 跨瀏覽器，而無需第三方插件等

通過CSS或JavaScript

UPDATE：

我試圖用JavaScript的Sys.UI.DomElement.setLocation（），但這個定位對象不絕對位置，但相對於它的父母。
有絕對位置的功能嗎？

Answer 1

爲了讓它在瀏覽器中居中，無論頁面滾動（這可能是你想要的），position：fixed會更可靠。修訂mike108代碼：

<style type="text/css"> 
.centered { 
    position:fixed; 
    z-index: 100; 
    top:50%; 
    left:50%; 
    margin:-100px 0 0 -100px; 
    width:200px; 
    height:200px; 
} 
</style> 

這裏假設你有你呈現一個固定大小的盒子。如果你沒有一個固定大小的盒子，你需要使用Javascript來測量窗口和div，並明確定位它（再次，固定可能是要走的路）。

不過要在所有瀏覽器上測試。可能有一些我們沒有想到的東西。

我實際上建議你看一下這樣做的Javascript插件之一，至少對於一個起點。即使你不想使用他們的代碼，他們也知道了。我認爲我用jqModal作爲出發點。

Answer 2

它必須指定一個寬度（即width：500px;），然後margin：auto;應該這樣做。

Answer 3

<style type="text/css"> 
.Div1 { 
position:absolute; 
top:50%; 
left:50%; 
margin:-100px 0 0 -100px; 
width:200px; 
height:200px; 
border:1px solid #9999FF; 
} 
</style> 


<div class="Div1"> 
</div> 

Answer 4

如果你想要的東西，垂直和水平居中，試試這個...

#shell{ 
width:100%; 
height:100% 
position:absolute; 
z-index:100; 
background: rgba(255,255,255,.8); 
display:table; 
} 

#inner{ 
margin:0 auto; 
display:table-cell; 
vertically-align:middle; 
width: /* input width here */ 
} 


    #overlay_container{ 
    width: /* input width here again */ 
    height: /* input height here */ 
    additional-styles: /* self explanatory */ 
    } 

Answer 5

我使用的JS代碼塊;對於高度和寬度方向中心爲兩個高度中心兩個寬度中心僅

setToCenterOfParent($('#myDiv'), document.body, true, false); 

僅

setToCenterOfParent($('#myDiv'), document.body, false, true); 

//呼叫功能

setToCenterOfParent($('#myDiv'), document.body, false, false); 

//呼叫功能

//呼叫功能

//函數定義

function setToCenterOfParent(element, parent, ignoreWidth, ignoreHeight){ 
     parentWidth = $(parent).width(); 
     parentHeight = $(parent).height(); 
     elementWidth = $(element).width(); 
     elementHeight = $(element).height(); 
     if(!ignoreWidth) 
      $(element).css('left', parentWidth/2 - elementWidth/2); 
     if(!ignoreHeight) 
      $(element).css('top', parentHeight/2 - elementHeight/2); 
    } 

Answer 6

請檢查此解決方案。沒有必要定義div框的寬度或高度。它將始終在屏幕的中間/中間。我希望我的解決方案對每個人都有用。

<style type="text/css"> 

    .mask{ 
    position:fixed; 
    z-index:100; 
    width:100%; 
    height:100%; 
    text-align: center; 
    color: white; 
    background-color: rgba(0,0,0,0.75); 
    overflow:hidden; 
    } 

    .contener{ 
    height:100%; 
    display:inline-table; 
    } 

    .contener .content{ 
    vertical-align: middle; 
    display:table-cell; 
    } 

    .contener .content p{ 
    padding:2em;  
    border:1px solid #3d3d3d; 
    background-color: #1d1d1d; 
    border-radius: 10px; 
    -moz-box-shadow: 0px 10px 10px black; 
    -webkit-box-shadow: 0px 10px 10px black; 
    box-shadow: 0px 10px 10px black; 
    } 

</style> 

<div class="mask"> 
    <div class="contener"> 
    <div class="content"> 
     <p>Test string</p> 
    </div> 
    </div> 
</div>