将 div 定位到可见区域的中心

发布于 2024-12-29 22:06:10 字数 381 浏览 1 评论 0原文

我正在为邮件列表注册制作一个灯箱样式的弹出窗口，但我希望弹出窗口位于可见页面的中心，而不仅仅是整个文档的中心；如果用户滚动到页面底部并单击注册，我希望它出现在屏幕中央。

我假设 jQuery/JS 将是实现此目的的最佳方式；这是我当前的 CSS 代码，它运行得相当好，但是对于较小的屏幕，需要将 div 动态下推到可见空间中。

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}

原文

I'm in the midst of making a lightbox style pop-up for a mailing list sign up, but I want the pop-up to position to the center of the visible page, not just the center of the whole document; if the user scrolls to the bottom of the page and clicks to sign up, I want it to appear in the center of the screen.

I'm assuming jQuery/JS will be the best way to go for this; here's my current CSS code which works fairly well but the div needs to be pushed down into the visible space dynamically for smaller screens.

.my-div{
    width:960px;
    height:540px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-480px;
    margin-top:-270px;
    z-index:60;
    display:none;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

荒人说梦 2025-01-05 22:06:10

你很接近！它可以单独使用 CSS 来完成：

使用 position:fixed 而不是 position:absolute。

固定是指视口，而绝对是指文档。 阅读所有内容！

回复收藏 0 原文

场罚期间 2025-01-05 22:06:10

var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();

d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";

var w = $(window).width();
var h = $(window).height();
var d = document.getElementById('my-div');
var divW = $(d).width();
var divH = $(d).height();

d.style.position="absolute";
d.style.top = (h/2)-(divH/2)+"px";
d.style.left = (w/2)-(divW/2)+"px";

回复收藏 0 原文

南薇 2025-01-05 22:06:10

我知道这不能解决问题，但它是一个很好的参考和起点：如何将 div 放置在浏览器窗口的中心

将 Div 精确放置在屏幕中心

<!DOCTYPE html> 
  <html > 
    <head> 
      <style type="text/css"> 
        .exactCenter { 
           width:200px; 
           height:200px; 
           position: fixed; 
           background-color: #00FF00; 
           top: 50%; 
           left: 50%; 
           margin-top: -100px; 
           margin-left: -100px; 
        } 
      </style> 
    </head> 
    <body> 
      <div class="exactCenter"> </div> 
    </body> 
  </html>

JSFiddle这里
和此处

I know this will not solve the question but it is good reference and a starting point: How to position a div in the center of browser window

Position Div Exactly at the center of the screen

<!DOCTYPE html> 
  <html > 
    <head> 
      <style type="text/css"> 
        .exactCenter { 
           width:200px; 
           height:200px; 
           position: fixed; 
           background-color: #00FF00; 
           top: 50%; 
           left: 50%; 
           margin-top: -100px; 
           margin-left: -100px; 
        } 
      </style> 
    </head> 
    <body> 
      <div class="exactCenter"> </div> 
    </body> 
  </html>

JSFiddle here
and here

回复收藏 0 原文

白鸥掠海 2025-01-05 22:06:10

使用 jQuery：

var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});

with jQuery:

var left = ($(window).width() - $(.my-div).width()) / 2;
var top = ($(window).height() - $(.my-div).height()) / 2;
$('.my-div').position({top: top + 'px', left: left + 'px});

回复收藏 0 原文

独木成林 2025-01-05 22:06:10

尽管接受的答案是最好的，但如果您无法将div位置设置为fixed，那么你就可以使用这个纯 JavaScript 解决方案。

var myElement = document.getElementById('my-div'),
    pageWidth = window.innerWidth,
    pageHeight = window.innerHeight,
    myElementWidth = myElement.offsetWidth,
    myElementHeight = myElement.offsetHeight;

myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

JSFiddle

或者更精简的版本：

var w = window,
    elem = document.getElementById('my-div');

elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

这个答案是来自 Lahiru Ashan 答案的普通 JavaScript 版本。

Although the accepted answer is best, if you can't set the divs position to fixed, then you can use this pure JavaScript solution.

var myElement = document.getElementById('my-div'),
    pageWidth = window.innerWidth,
    pageHeight = window.innerHeight,
    myElementWidth = myElement.offsetWidth,
    myElementHeight = myElement.offsetHeight;

myElement.style.top = (pageHeight / 2) - (myElementHeight / 2) + "px";
myElement.style.left = (pageWidth / 2) - (myElementWidth / 2) + "px";

JSFiddle

Or a more condensed version:

var w = window,
    elem = document.getElementById('my-div');

elem.style.top = (w.innerHeight/2) - (elem.offsetHeight/2) + 'px';
elem.style.left = (w.innerWidth/2) - (elem.offsetWidth/2) + 'px';

This answer is a vanilla JavaScript version from Lahiru Ashan's answer.

回复收藏 0 原文

~没有更多了~