当页面大于屏幕时，如何在屏幕中间放置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/看到它;
#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
相应地检测可用的高度和位置。
