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

2020/09/21 05:01 · javascript ·  · 0评论

如何<div>使用jQuery在屏幕中央设置a

我喜欢向jQuery添加功能,因此此功能将有所帮助:

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
                                                $(window).scrollLeft()) + "px");
    return this;
}

现在我们可以这样写:

$(element).center();

演示:小提琴(带有添加的参数)

在这里放了一个jQuery插件

非常短的版本

$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});

精简版

(function($){
    $.fn.extend({
        center: function () {
            return this.each(function() {
                var top = ($(window).height() - $(this).outerHeight()) / 2;
                var left = ($(window).width() - $(this).outerWidth()) / 2;
                $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
            });
        }
    }); 
})(jQuery);

通过此代码激活:

$('#mainDiv').center();

插件版本

(function($){
     $.fn.extend({
          center: function (options) {
               var options =  $.extend({ // Default values
                    inside:window, // element, center into window
                    transition: 0, // millisecond, transition time
                    minX:0, // pixel, minimum left element value
                    minY:0, // pixel, minimum top element value
                    withScrolling:true, // booleen, take care of the scrollbar (scrollTop)
                    vertical:true, // booleen, center vertical
                    horizontal:true // booleen, center horizontal
               }, options);
               return this.each(function() {
                    var props = {position:'absolute'};
                    if (options.vertical) {
                         var top = ($(options.inside).height() - $(this).outerHeight()) / 2;
                         if (options.withScrolling) top += $(options.inside).scrollTop() || 0;
                         top = (top > options.minY ? top : options.minY);
                         $.extend(props, {top: top+'px'});
                    }
                    if (options.horizontal) {
                          var left = ($(options.inside).width() - $(this).outerWidth()) / 2;
                          if (options.withScrolling) left += $(options.inside).scrollLeft() || 0;
                          left = (left > options.minX ? left : options.minX);
                          $.extend(props, {left: left+'px'});
                    }
                    if (options.transition > 0) $(this).animate(props, options.transition);
                    else $(this).css(props);
                    return $(this);
               });
          }
     });
})(jQuery);

通过此代码激活:

$(document).ready(function(){
    $('#mainDiv').center();
    $(window).bind('resize', function() {
        $('#mainDiv').center({transition:300});
    });
);

那正确吗 ?

更新:

CSS技巧

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Yep! */
  width: 48%;
  height: 59%;
}

我会推荐jQueryUI Position Utility

$('your-selector').position({
    of: $(window)
});

这给您带来了更多的可能性,而不仅仅是居中...

这是我的努力。我最终将其用于Lightbox克隆。该解决方案的主要优点是,即使调整了窗口大小,该元素也将自动保持居中状态,使其非常适合这种用法。

$.fn.center = function() {
    this.css({
        'position': 'fixed',
        'left': '50%',
        'top': '50%'
    });
    this.css({
        'margin-left': -this.outerWidth() / 2 + 'px',
        'margin-top': -this.outerHeight() / 2 + 'px'
    });

    return this;
}

您可以单独使用CSS居中,如下所示:

工作实例

.center{
    position: absolute;
    height: 50px;
    width: 50px;
    background:red;
    top:calc(50% - 50px/2); /* height divided by 2*/
    left:calc(50% - 50px/2); /* width divided by 2*/
}
<div class="center"></div>

calc() 允许您在CSS中进行基本计算。

calc()浏览器支持表的MDN文档

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

我建议您使用Math.abs()包装顶部和左侧的值,如下所示。如果窗口太小,并且模式对话框的顶部有一个关闭框,则可以防止看不到关闭框的问题。Tony的函数可能具有负值。关于如何以负值结束的一个很好的例子是,如果您有一个大的居中对话框,但最终用户已安装了多个工具栏和/或增加了其默认字体-在这种情况下,将出现在模式对话框中的关闭框(如果在顶部)可能不可见且不可点击。

我要做的另一件事是通过缓存$(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();
});

我将使用jQuery UI position函数。

请参阅工作演示

<div id="test" style="position:absolute;background-color:blue;color:white">
    test div to center in window
</div>

如果我有一个id为“ test”的div居中,则以下脚本会将div居中显示在文档中的窗口中。(位置选项中“ my”和“ at”的默认值为“ center”)

<script type="text/javascript">
$(function(){
  $("#test").position({
     of: $(window)
  });
};
</script>

我想纠正一个问题。

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

上面的代码在以下情况下this.height(例如,假设用户调整屏幕大小并且内容是动态的)不起作用scrollTop() = 0,例如:

window.height600
this.height650

600 - 650 = -50  

-50 / 2 = -25

现在,该框位于-25屏幕中央。

这未经测试,但类似的东西应该起作用。

var myElement = $('#myElement');
myElement.css({
    position: 'absolute',
    left: '50%',
    'margin-left': 0 - (myElement.width() / 2)
});

我认为,如果要使元素始终居中于页面中间,则绝对位置最好。您可能需要固定的元素。我找到了另一个使用固定定位的jQuery居中插件。它称为固定中心

此功能的过渡组件在Chrome中对我来说确实效果不佳(未在其他地方进行测试)。我会调整一堆窗口的大小,而我的元素会慢慢地踩着踏板车,试图追赶。

因此,以下函数对此进行了注释。另外,如果您想垂直居中而不是水平居中,我添加了用于传递可选的x&y布尔值的参数,例如:

// Center an element on the screen
(function($){
  $.fn.extend({
    center: function (x,y) {
      // var options =  $.extend({transition:300, minX:0, minY:0}, options);
      return this.each(function() {
                if (x == undefined) {
                    x = true;
                }
                if (y == undefined) {
                    y = true;
                }
                var $this = $(this);
                var $window = $(window);
                $this.css({
                    position: "absolute",
                });
                if (x) {
                    var left = ($window.width() - $this.outerWidth())/2+$window.scrollLeft();
                    $this.css('left',left)
                }
                if (!y == false) {
            var top = ($window.height() - $this.outerHeight())/2+$window.scrollTop();   
                    $this.css('top',top);
                }
        // $(this).animate({
        //   top: (top > options.minY ? top : options.minY)+'px',
        //   left: (left > options.minX ? left : options.minX)+'px'
        // }, options.transition);
        return $(this);
      });
    }
  });
})(jQuery);

要将元素相对于浏览器视口(窗口)居中,请不要使用position: absolute,正确的位置值应为fixed(绝对值:“该元素相对于其第一个定位(非静态)祖先元素定位”)。

建议的中心插件的此替代版本使用“%”代替“ px”,因此,当您调整窗口大小时,内容将保持居中:

$.fn.center = function () {
    var heightRatio = ($(window).height() != 0) 
            ? this.outerHeight() / $(window).height() : 1;
    var widthRatio = ($(window).width() != 0) 
            ? this.outerWidth() / $(window).width() : 1;

    this.css({
        position: 'fixed',
        margin: 0,
        top: (50*(1-heightRatio)) + "%",
        left: (50*(1-widthRatio))  + "%"
    });

    return this;
}

You need to put margin: 0 to exclude the content margins from the width/height (since we are using position fixed, having margins makes no sense).
According to the jQuery doc using .outerWidth(true) should include margins, but it didn't work as expected when I tried in Chrome.

The 50*(1-ratio) comes from:

Window Width: W = 100%

Element Width (in %): w = 100 * elementWidthInPixels/windowWidthInPixels

Them to calcule the centered left:

 left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
 = 50 * (1-elementWidthInPixels/windowWidthInPixels)

This is great. I added a callback function

center: function (options, callback) {

if (options.transition > 0) {
   $(this).animate(props, options.transition, callback);
} else { 
    $(this).css(props);
   if (typeof callback == 'function') { // make sure the callback is a function
       callback.call(this); // brings the scope to the callback
   }
}

Edit:

If the question taught me anything, it's this: don't change something that already works :)

我在http://www.jakpsatweb.cz/css/css-vertical-center-solution.html上提供了(几乎)逐字记录的处理方式-对于IE来说,它已遭黑客入侵,但提供了一种纯CSS方式回答问题:

.container {display:table; height:100%; position:absolute; overflow:hidden; width:100%;}
.helper    {#position:absolute; #top:50%;
            display:table-cell; vertical-align:middle;}
.content   {#position:relative; #top:-50%;
            margin:0 auto; width:200px; border:1px solid orange;}

小提琴:http : //jsfiddle.net/S9upd/4/

我已经通过浏览器快照运行了它,看起来还不错。如果没有其他问题,我将其保留在下面,以使CSS规范规定的保证金百分比处理成为现实。

原版的:

看来我晚会晚了!

上面有一些注释表明这是一个CSS问题-关注点和所有问题的分离。首先,我要说CSS 确实是在这一点上立足。我的意思是,这样做很容易:

.container {
    position:absolute;
    left: 50%;
    top: 50%;
    overflow:visible;
}
.content {
    position:relative;
    margin:-50% 50% 50% -50%;
}

对?容器的左上角将位于屏幕的中心,并且负边距将使内容神奇地重新出现在页面的绝对中心!http://jsfiddle.net/rJPPc/

错误!可以水平放置,但可以垂直放置...哦,我知道了。显然,在CSS中,当以%设置顶部边距时,该值将始终以相对于包含块宽度百分比来计算像苹果和桔子!如果您不信任我或Mozilla doco,请通过调整内容宽度来玩上面的小提琴,并感到惊讶。


现在,以CSS为生,我并不想放弃。同时,我更喜欢简单的事情,因此我借用了捷克CSS专家的研究成果,并把它变成了可行的提琴。简而言之,我们创建一个表,其中vertical-align设置为中:

<table class="super-centered"><tr><td>
    <div class="content">
        <p>I am centered like a boss!</p>
    </div>
</td></tr></table>

而且,内容的位置可以通过良好的旧边距0自动进行微调

.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}​

按承诺工作中的小提琴:http : //jsfiddle.net/teDQ2/

我在这里使用的是一种“居中”方法,该方法可确保您尝试居中的元素不仅处于“固定”或“绝对”位置,而且还确保您居中的元素小于其父元素,即居中并且相对于的元素是父元素,如果元素的父元素小于元素本身,则会将DOM掠夺到下一个父元素,并相对于其居中。

$.fn.center = function () {
        /// <summary>Centers a Fixed or Absolute positioned element relative to its parent</summary>

        var element = $(this),
            elementPos = element.css('position'),
            elementParent = $(element.parent()),
            elementWidth = element.outerWidth(),
            parentWidth = elementParent.width();

        if (parentWidth <= elementWidth) {
            elementParent = $(elementParent.parent());
            parentWidth = elementParent.width();
        }

        if (elementPos === "absolute" || elementPos === "fixed") {
            element.css('right', (parentWidth / 2) - elementWidth / 2 + 'px');
        }
    };

我用这个:

$(function() {
   $('#divId').css({
    'left' : '50%',
    'top' : '50%',
    'position' : 'absolute',
    'margin-left' : -$('#divId').outerWidth()/2,
    'margin-top' : -$('#divId').outerHeight()/2
  });
});

请使用此:

$(window).resize(function(){
    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });
});

// To initially run the function:
$(window).resize();

您得到的过渡效果很差,因为每次滚动文档时都要调整元素的位置。您要使用固定位置。我尝试了上面列出的固定中心插件,这似乎确实解决了问题。固定位置允许您将元素居中一次,并且CSS属性将在每次滚动时为您保持该位置。

这是我的版本。在查看这些示例后,我可能会更改它。

$.fn.pixels = function(property){
    return parseInt(this.css(property));
};

$.fn.center = function(){
    var w = $($w);
    return this.each(function(){
        $(this).css("position","absolute");
        $(this).css("top",((w.height() - $(this).height()) / 2) - (($(this).pixels('padding-top') + $(this).pixels('padding-bottom')) / 2) + w.scrollTop() + "px");
        $(this).css("left",((w.width() - $(this).width()) / 2) - (($(this).pixels('padding-left') + $(this).pixels('padding-right')) / 2) + w.scrollLeft() + "px");
    });
};

不需要jQuery的

我用它来使Div元素居中。CSS样式

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

开放元素

$(document).ready(function(){
    $(".open").click(function(e){
      $(".black_overlay").fadeIn(200);
    });

});

我对托尼·洛斯答案的更新
这是我现在认真使用的答案的修改版本。
我想我会分享一下,因为它可以为您可能遇到的各种情况添加更多功能,例如,不同类型的
position或者只需要水平/垂直居中,而不是两者都需要。

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")

它可以与任何定位类型一起使用,并且可以轻松地在整个站点中使用,也可以轻松地移植到您创建的任何其他站点。不再需要烦人的解决方法来正确地对中某项。

希望这对外面的人有用!请享用。

有很多方法可以做到这一点。我的对象通过display:none隐藏在BODY标记内,因此相对于BODY定位。使用$(“#object_id”)。show()之后,我调用$(“#object_id”)。center()

我使用position:absolute,因为有可能(尤其是在小型移动设备上)模态窗口大于设备窗口,在这种情况下,如果定位固定,则某些模态内容可能无法访问。

这是我根据其他人的回答和我的具体需求而设计的口味:

$.fn.center = function () {
        this.css("position","absolute");

        //use % so that modal window will adjust with browser resizing
        this.css("top","50%");
        this.css("left","50%");

        //use negative margin to center
        this.css("margin-left",(-1*this.outerWidth()/2)+($(window).scrollLeft())+"px");
        this.css("margin-top",(-1*this.outerHeight()/2)+($(window).scrollTop())+"px");

        //catch cases where object would be offscreen
        if(this.offset().top<0)this.css({"top":"5px","margin-top":"0"});
        if(this.offset().left<0)this.css({"left":"5px","margin-left":"0"});

        return this;
    };

您可以使用CSS translate属性:

position: absolute;
transform: translate(-50%, -50%);

阅读此帖子以获取更多详细信息。

通常情况下,我只会使用CSS来执行此操作...但是由于您要求使用jQuery来执行此操作...

以下代码将div在其容器内水平和垂直居中:

$("#target").addClass("centered-content")
            .wrap("<div class='center-outer-container'></div>")
            .wrap("<div class='center-inner-container'></div>");
body {
    margin : 0;
    background: #ccc;
}

.center-outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
}

.center-inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="target">Center this!</div>

(另请参阅此小提琴

CSS解决方案
仅两行

它将您的内部div水平和垂直居中。

#outer{
  display: flex;
}
#inner{
margin: auto;

}

仅用于水平对齐,更改

margin: 0 auto;

对于垂直而言,变化

margin: auto 0;

只需说:$(“#divID”)。html($('')。html($(“#divID”)。html()));;

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

#timer_wrap{  
  position: fixed;
  left: 50%;
  top: 50%;
} 
本文地址:http://javascript.askforanswer.com/shiyongjqueryzaipingmushangjuzhongfangzhidiv.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!