如何将div居中显示在屏幕中间？

Question

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

通过CSS或Javascript

更新:

我尝试使用Javascript的Sys.UI.DomElement.setLocation()，但是该定位对象不在绝对位置而是相对于其父级位置。
是否有将其放置在绝对位置的函数？

- dani

---

要相对于浏览器窗口定位，请使用“fixed”。 - ndp

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作为起点的。

- ndp

---

但IE6无法识别position:fixed。 - Mike108

我知道你的评论是旧的，但考虑到其他人的参考，因为这是一个流行的问题，我们不应支持IE6；这会鼓励人们使用它、支持它和为它开发。 - cossacksman

我想补充的是，虽然这种技术是好的，但如果你只针对最近的浏览器，请考虑使用 flexbox。这只需三行即可完成，不需要知道居中元素的宽度或高度。 - ndp

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>

- Mike108

---

将 z-index 设置为将 div 放置在所有其他对象上方 - Mike108

它是水平居中和垂直居中。 - Mike108

我是否根据宽度和高度设置边距？ - dani

是的。如果您没有固定的宽度或高度，您必须使用JS获取这些数字并相应地调整位置。此时，您只需调整“left”和“top”以反映正确的偏移量，完全忘记边距即可。 - Miriam Suzanne

Answer 3

必须指定宽度（例如width:500px;），然后margin:auto;就可以了。

- PaulBM

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);
    }

- Aki143S

---

请在以后明确说明这是 JQuery，而不是 JS。原帖作者确实说了没有第三方要求。 - Liam Dawson

Answer 5

现在可以轻松地使用flex实现这一点。微软不再支持旧版本的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 */
}

- DrewRobertson93

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>

- Slowgun