如何将div放在屏幕中央？

Question

实际上在当前视图的中心，首先是所有其他对象。 跨浏览器，没有第三方插件等

通过CSS或Javascript

更新：

我试图使用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

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

它必须具有指定的宽度（即宽度：500px;），然后是margin：auto; 应该这样做。

Answer 4

我正在使用这块js代码;

//高度和宽度中心的调用功能

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

Answer 5

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

Answer 6

现在可以通过flex轻松实现这一点。 Microsoft不再支持旧版Windows。 此外，Mozilla和Chrome不断更新其引擎，因此flexbox牢牢扎根于所有现代浏览器。

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

设置为#container元素的直接子元素的所有内容都将居中。

这一小段代码绝对适用于登录菜单或在背景图像上居中文本等内容。

编辑 - 下面的代码是过时的，见上面的更新代码

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

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