如何将div放置在屏幕*？

问题描述：

实际上在当前视图的中心，高于所有其他对象。跨浏览器，而无需第三方插件等如何将div放置在屏幕*？

通过CSS或JavaScript

UPDATE：

我试图用JavaScript的Sys.UI.DomElement.setLocation（），但这个定位对象不绝对位置，但相对于它的父母。
有绝对位置的功能吗？

要相对于浏览器窗口进行定位，请使用“固定”。 – ndp 2009-08-29 22:21:41

答

为了让它在浏览器中居中，无论页面滚动（这可能是你想要的），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作为出发点。

但IE6无法识别位置：固定。 – Mike108 2009-08-31 11:16:55

我知道您的评论已过时，但对于其他人的参考，因为这是一个受欢迎的问题，IE6不应受支持;它鼓励人们使用它，支持它并为其开发。 – cossacksman 2016-03-23 16:05:21

我想补充说的是，虽然这种技术很好，但如果您只针对最新的浏览器，请查看flexbox。这只需三行即可完成，不需要知道居中元素的宽度或高度。 – ndp 2016-03-28 00:14:23

答

它必须指定一个宽度（即width：500px;），然后margin：auto;应该这样做。

不在Internet Explorer中：（ – Thinker 2009-08-29 18:08:52

答

<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>

设置z-index将div放在所有其他对象之上 – Mike108 2009-08-29 16:16:07

它是水平中心和垂直中心 – Mike108 2009-08-29 16:24:15

我是否根据宽度和高度设置边距？ – dani 2009-08-29 17:04:38

答

如果你想要的东西，垂直和水平居中，试试这个...

#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 */ 
    }

答

我使用的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); 
    }

请在日后澄清，这是JQuery，而不是JS。原来的海报确实没有说第三方的要求。 – 2014-01-04 11:39:30

答

请检查此解决方案。没有必要定义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>

如何将div放置在屏幕*？

相关推荐