当页面大于屏幕时,如何在屏幕中间放置div

您好我正在使用类似于以下获得一个div位于屏幕中间:

<style type="text/css"> #mydiv { position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } </style> <div id="mydiv">Test Div</div> 

然而,这个问题是它把项目放在页面中间而不是屏幕上。 所以如果页面是几个屏幕高,我在页面的顶部(该部分的顶部显示在屏幕上),当我使div出现甚至不在屏幕上。 你必须向下滚动来查看它。

有人可以告诉我如何让它出现在屏幕中间吗?

只要添加position:fixed ,即使向下滚动,它也会保持在视图中。 在http://jsfiddle.net/XEUbc/1/看到&#x5B83;

 #mydiv { position:fixed; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } 

我认为这是一个简单的解决scheme:

 <div style=" display: inline-block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 200px; height: 100px; margin: auto; background-color: #f3f3f3;">Full Center ON Page </div> 

如果你知道元素的大小,你可以简单地使用margin属性:

 #mydiv { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; } 

请注意 ,您应该使用元素的宽度和高度的一半

但是,如果你不确定这个尺寸,那么这个技巧就是诀窍:

 #mydiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

使用变换;

 <style type="text/css"> #mydiv { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> 

Javascript解决scheme:

 var left = (screen.width / 2) - (530 / 2); var top = (screen.height / 2) - (500 / 2); var _url = 'PopupListRepair.aspx'; window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no"); 

只要把margin:auto;

 #mydiv { margin:auto; position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3; } 

 <div id="mydiv">Test Div</div> 

简短的回答,只需添加position:fixed ,这将解决您的问题

 position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; 

这对我有效

 <html> <head> <style type="text/css"> #mydiv { position:absolute; top: 0; left: 0; right: 0; bottom: 0; width:100px; height:200px; margin:auto; border: 1px solid #ccc; background-color: #f3f3f3; } </style> </head> <body> <div id="mydiv">Maitrey</div> </body> </html> 

在你的脚本页面…

  $('.a-middle').css('margin-top', function () { return ($(window).height() - $(this).height()) / 2 }); 

在Div中使用一个中产阶级

  <div class="a-middle"> 

那么,下面是这个工作的例子。

这将处理中心位置,如果您调整网页或负载的大小。

 <!DOCTYPE html> <html> <head> <style> .loader { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; border: 10px solid #dcdcdc; border-radius: 50%; border-top: 10px solid #3498db; width: 30px; height: 30px; -webkit-animation: spin 2s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="loader" style="display:block"></div> </body> </html> 

我只是在testing页面上testing了精确的代码,它在页面上完美地集中了div,甚至在尝试将它压低之前大约有100个。

也许尝试检查你的代码的其余部分,看看你是否覆盖了DIV的值,或者是影响你的DIV导致这些问题。

为此,您将不得不检测屏幕大小。 这是不可能的CSS或HTML; 你需要JavaScript。 这里是窗口属性的Mozilla开发人员中心条目https://developer.mozilla.org/en/DOM/window#Properties

相应地检测可用的高度和位置。