Javascript 如何将div定位在屏幕中央？

实际上位于当前视图的中心，高于所有其他对象。 跨浏览器，无第三方插件等

通过CSS或Javascript

更新：

我尝试使用Javascript的Sys.UI.domeElement.setLocation（），但该定位对象不在绝对位置，而是相对于其父对象。

---

是否有一个函数可以放置在绝对位置？

它必须有一个指定的宽度（即宽度：500px；），然后边距：自动；应该这样做。

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

.Div1{
位置：绝对位置；
最高：50%；
左：50%；
裕度：-100px 0-100px；
宽度：200px；
高度：200px；
边框：1px实心#9999FF；
}  

要使其在浏览器中居中，无论页面滚动（这可能是您想要的），位置：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>

位置：固定；
z指数：100；
最高：50%；
左：50%；
裕度：-100px 0-100px；
宽度：200px；
高度：200px；
}  

这假设您有一个固定大小的显示框。如果没有固定大小的框，则需要使用Javascript来测量窗口和div，并显式地定位它（同样，修复可能是最好的方法）

不过，请在所有浏览器上进行测试。也许有些事情我们没有想到

---

实际上，我建议您查看一个Javascript插件，至少作为一个起点。即使你不想使用他们的代码，他们也已经找到了答案。我想我使用jqModal作为起点。

现在使用flex可以很容易地实现这一点。Microsoft不再支持旧版本的windows。此外，Mozilla和Chrome不断更新其引擎，因此flexbox在所有现代浏览器中都根深蒂固

#container{
   display: flex;
   justify-content: center;
   align-items: center;
}

设置为该容器元素的直接子元素的所有内容都将居中

这段简短的代码非常适合登录菜单或将文本置于背景图像的中心

编辑-下面的代码已过时请参见上面的更新代码

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

 #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, false, false);

//仅对两个高度中心调用函数

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

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

//仅对两个宽度中心调用函数

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

    setToCenterOfParent( $('#myDiv'), document.body, true, 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);
    }

---

请检查此解决方案。无需定义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>

.面具{
位置：固定；
z指数：100；
宽度：100%；
身高：100%；
文本对齐：居中；
颜色：白色；
背景色：rgba（0,0,0,0.75）；
溢出：隐藏；
}
孔特纳先生{
身高：100%；
显示：内联表；
}
.内容{
垂直对齐：中间对齐；
显示：表格单元格；
}
内容{
填料：2米；
边框：1px实心#3d3d；
背景色：#1d；
边界半径：10px；
-moz盒阴影：0px 10px 10px黑色；
-webkit盒阴影：0px 10px 10px黑色；
盒影：0px 10px 10px黑色；
}
测试字符串

Set z-index将div置于所有其他对象之上。它是水平中心和垂直中心。是否根据宽度和高度设置边距？是。如果没有固定的宽度或高度，则必须使用JS获取这些数字并相应地调整位置。不过，此时，您可以调整

left

和

top

以反映适当的偏移量，并完全忽略边距。要相对于浏览器窗口定位，请使用“fixed”。但IE6无法识别位置：fixed。我理解您的评论很老，但供其他人参考，因为这是一个流行的问题，不应支持IE6；它鼓励人们使用它，支持它，并为它开发。我想补充一点，虽然这种技术很好，但如果你只针对最新的浏览器，看看flexbox。这只需要三行就可以完成，不需要知道居中元素的宽度或高度。请在以后澄清这是JQuery，而不是JS。原来的海报上说没有第三方要求。