使用jQuery在屏幕上居中放置一个DIV

我如何去设置一个<div>在屏幕的中心使用jQuery?

当前回答

这可以只用CSS来完成。但他们是用jQuery或JavaScript问的

在这里，使用CSS Flex box属性来对齐div中心。

body.center{
  display:flex;
  align-items:center; // Vertical alignment
  justify-content:center; // Horizontal alignment
}

对齐项目:中心;-用于垂直对齐。

justify-content:中心;-用于水平对齐。

document.querySelector .classList.add(“身体”)(“中心”); 身体{ Margin: 0; 身高:100 vh; 宽度:100%; 背景:# ccc; ｝ #{主要背景:# 00 cc00; 宽度:100 px; 身高:100 px; ｝ body.center { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ <身体> < div id = "主" > < / div > < /身体>

2020-09-23 14:40:26

其他回答

我更新了托尼的答案这是他的答案的修改版本，我现在虔诚地使用。我想我会分享它，因为它为你可能有的各种情况增加了更多的功能，比如不同类型的位置，或者只想要水平/垂直居中，而不是两者都要。

center.js:

// We add a pos parameter so we can specify which position type we want

// Center it both horizontally and vertically (dead center)
jQuery.fn.center = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it horizontally only
jQuery.fn.centerHor = function (pos) {
    this.css("position", pos);
    this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
    return this;
}

// Center it vertically only
jQuery.fn.centerVer = function (pos) {
    this.css("position", pos);
    this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
    return this;
}

在我的<head>:

<script src="scripts/center.js"></script>

用法示例:

$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")

$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")

$("#example5").center("absolute")
$("#example6").center("fixed")

它适用于任何定位类型，可以轻松地在整个网站中使用，也可以轻松地移植到您创建的任何其他网站。没有更多的恼人的工作区，为中心的东西正确。

希望这是有用的人在那里!享受。

2015-07-23 15:31:33

我在扩展@TonyL给出的精彩答案。我添加了Math.abs()来包装值，而且我还考虑到jQuery可能处于“无冲突”模式，例如在WordPress中。

I recommend that you wrap the top and left values with Math.abs() as I have done below. If the window is too small, and your modal dialog has a close box at the top, this will prevent the problem of not seeing the close box. Tony's function would have had potentially negative values. A good example on how you end up with negative values is if you have a large centered dialog but the end user has installed several toolbars and/or increased his default font -- in such a case, the close box on a modal dialog (if at the top) might not be visible and clickable.

我做的另一件事是通过缓存$(window)对象来加快速度，这样我就减少了额外的DOM遍历，并且我使用了集群CSS。

jQuery.fn.center = function ($) {
  var w = $(window);
  this.css({
    'position':'absolute',
    'top':Math.abs(((w.height() - this.outerHeight()) / 2) + w.scrollTop()),
    'left':Math.abs(((w.width() - this.outerWidth()) / 2) + w.scrollLeft())
  });
  return this;
}

要使用，你可以这样做:

jQuery(document).ready(function($){
  $('#myelem').center();
});

2012-04-23 06:32:36

之所以会出现这种糟糕的过渡，是因为每次滚动文档时都要调整元素的位置。你想要的是使用固定的定位。我尝试了上面列出的固定中心插件，这似乎解决了这个问题很好。固定定位允许您将一个元素居中一次，CSS属性将在您每次滚动时为您维护该位置。

2010-07-07 18:17:19

为什么你不使用CSS居中div?

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
}

2011-05-30 11:35:58

我想纠正一个问题。

this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

以上代码在这种情况下将不起作用。height(假设用户调整屏幕大小，内容是动态的)和scrollTop() = 0，示例:

窗口。高度是600 这一点。高度是650

600 - 650 = -50  

-50 / 2 = -25

现在方框在屏幕外的中心位置为-25。

2011-03-08 18:27:11

使用jQuery在屏幕上居中放置一个DIV

推荐文章

最新文章

标签