Làm cách nào để cài đặt một <div>ở giữa màn hình bằng jQuery?

Tôi thích thêm các hàm vào jQuery để hàm này có ích:

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;
}

Bây giờ chúng ta chỉ có thể viết:

$(element).center();

Demo: Fiddle (có thêm tham số)

Tôi đặt một plugin jquery ở đây

PHIÊN BẢN RẤT NGẮN

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

PHIÊN BẢN NGẮN

(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);

Được kích hoạt bởi mã này:

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

PHIÊN BẢN PLUGIN

(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);

Được kích hoạt bởi mã này:

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

Có đúng không ?

CẬP NHẬT:

Từ thủ thuật CSS

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

Tôi muốn giới thiệu tiện ích Vị trí jQueryUI

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

cung cấp cho bạn nhiều khả năng hơn là chỉ định tâm ...

Đây là tôi đi. Tôi đã kết thúc việc sử dụng nó cho bản sao Lightbox của tôi. Ưu điểm chính của giải pháp này là phần tử sẽ tự động tập trung ngay cả khi cửa sổ được thay đổi kích thước làm cho nó lý tưởng cho loại sử dụng này.

$.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;
}

Bạn có thể sử dụng CSS một mình để tập trung như vậy:

Ví dụ làm việc

.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() cho phép bạn thực hiện các tính toán cơ bản trong css.

Tài liệu MDN cho calc()
bảng hỗ trợ Trình duyệt

Tôi đang mở rộng dựa trên câu trả lời tuyệt vời được đưa ra bởi @TonyL. Tôi đang thêm Math.abs () để bọc các giá trị và tôi cũng tính đến việc jQuery có thể ở chế độ "không xung đột", ví dụ như trong WordPress.

Tôi khuyên bạn nên bọc các giá trị trên cùng và bên trái bằng Math.abs () như tôi đã thực hiện bên dưới. Nếu cửa sổ quá nhỏ và hộp thoại phương thức của bạn có hộp đóng ở trên cùng, điều này sẽ ngăn vấn đề không nhìn thấy hộp đóng. Chức năng của Tony sẽ có các giá trị âm. Một ví dụ điển hình về cách bạn kết thúc với các giá trị âm là nếu bạn có một hộp thoại lớn ở giữa nhưng người dùng cuối đã cài đặt một số thanh công cụ và / hoặc tăng phông chữ mặc định của anh ấy - trong trường hợp như vậy, hộp đóng trên hộp thoại phương thức (nếu ở trên cùng) có thể không nhìn thấy và có thể nhấp.

Một điều khác tôi làm là tăng tốc độ này lên một chút bằng cách lưu trữ đối tượng $ (window) để tôi giảm các đường truyền DOM bổ sung và tôi sử dụng CSS cụm.

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;
}

Để sử dụng, bạn sẽ làm một cái gì đó như:

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

Tôi sẽ sử dụng chức năng UI UI position .

Xem bản demo làm việc .

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

Nếu tôi có div với id "test" ở giữa thì đoạn script sau sẽ căn giữa div trong cửa sổ trên tài liệu đã sẵn sàng. (các giá trị mặc định cho "của tôi" và "tại" trong các tùy chọn vị trí là "giữa")

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

Tôi muốn sửa một vấn đề.

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

Mã ở trên sẽ không hoạt động trong trường hợp khi this.height(giả sử rằng người dùng thay đổi kích thước màn hình và nội dung là động) và scrollTop() = 0, ví dụ:

window.heightlà 600
this.heightđược650

600 - 650 = -50  

-50 / 2 = -25

Bây giờ hộp là trung tâm -25ngoài màn hình.

Điều này chưa được kiểm tra, nhưng một cái gì đó như thế này sẽ hoạt động.

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

Tôi không nghĩ rằng có một vị trí tuyệt đối sẽ là tốt nhất nếu bạn muốn một yếu tố luôn tập trung ở giữa trang. Bạn có thể muốn một yếu tố cố định. Tôi tìm thấy một plugin định tâm jquery khác sử dụng định vị cố định. Nó được gọi là trung tâm cố định .

Thành phần chuyển đổi của chức năng này hoạt động rất kém đối với tôi trong Chrome (không thử nghiệm ở nơi khác). Tôi sẽ thay đổi kích thước cửa sổ một bó và phần tử của tôi sẽ di chuyển chậm chạp, cố gắng bắt kịp.

Vì vậy, các chức năng sau bình luận rằng một phần ra. Ngoài ra, tôi đã thêm các tham số để chuyển trong các booleans x & y tùy chọn, nếu bạn muốn căn giữa theo chiều dọc nhưng không theo chiều ngang, ví dụ:

// 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);

Để căn giữa phần tử liên quan đến khung nhìn trình duyệt (cửa sổ), không sử dụng position: absolute, giá trị vị trí chính xác phải là fixed(phương tiện tuyệt đối: "Phần tử được định vị so với phần tử tổ tiên được định vị (không tĩnh) đầu tiên").

Phiên bản thay thế này của plugin trung tâm được đề xuất sử dụng "%" thay vì "px" để khi bạn thay đổi kích thước cửa sổ, nội dung sẽ được giữ ở giữa:

$.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;
}

Bạn cần đặt margin: 0để loại trừ lề nội dung khỏi chiều rộng / chiều cao (vì chúng tôi đang sử dụng vị trí cố định, có lề không có ý nghĩa). Theo tài liệu jQuery sử dụng .outerWidth(true)nên bao gồm lề, nhưng nó không hoạt động như mong đợi khi tôi thử trong Chrome.

Xuất 50*(1-ratio)phát từ:

Chiều rộng cửa sổ: W = 100%

Chiều rộng phần tử (tính bằng%): w = 100 * elementWidthInPixels/windowWidthInPixels

Họ để calcule trung tâm bên trái:

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

Điều đó thật tuyệt. Tôi đã thêm chức năng gọi lại

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
   }
}

Biên tập:

Nếu câu hỏi đã dạy tôi bất cứ điều gì, thì đây là: đừng thay đổi thứ gì đó đã hoạt động :)

Tôi đang cung cấp một bản sao nguyên văn (gần như) về cách xử lý việc này trên http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - nó bị hack rất nhiều cho IE nhưng cung cấp cách CSS thuần túy trả lời câu hỏi:

.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;}

Câu đố: http://jsfiddle.net/S9upd/4/

Tôi đã chạy nó thông qua các trình duyệt và nó có vẻ tốt; nếu không có gì khác, tôi sẽ giữ bản gốc bên dưới để việc xử lý phần trăm lề như được chỉ định bởi thông số CSS sẽ thấy được ánh sáng.

Nguyên:

Hình như tôi đến bữa tiệc muộn!

Có một số ý kiến ​​ở trên cho thấy đây là một câu hỏi CSS - phân tách mối quan tâm và tất cả. Hãy để tôi nói trước điều này bằng cách nói rằng CSS thực sự tự bắn vào chân này. Ý tôi là, làm thế nào dễ dàng để làm điều này:

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

Đúng? Góc trên bên trái của Container sẽ ở giữa màn hình và với lề âm, nội dung sẽ xuất hiện lại một cách kỳ diệu ở trung tâm tuyệt đối của trang! http://jsfiddle.net/rJPPc/

Sai lầm! Định vị ngang là OK, nhưng theo chiều dọc ... Ồ, tôi hiểu rồi. Rõ ràng trong css, khi đặt tỷ lệ lợi nhuận cao nhất tính theo%, giá trị được tính theo tỷ lệ phần trăm luôn luôn tương ứng với chiều rộng của khối chứa . Giống như táo và cam! Nếu bạn không tin tưởng tôi hoặc Mozilla doco, hãy chơi với câu đố ở trên bằng cách điều chỉnh độ rộng nội dung và ngạc nhiên.

Bây giờ, với CSS là bánh mì và bơ của tôi, tôi sẽ không từ bỏ. Đồng thời, tôi thích mọi thứ dễ dàng hơn, vì vậy tôi đã mượn những phát hiện của một bậc thầy CSS Séc và biến nó thành một bí quyết làm việc. Câu chuyện dài, chúng tôi tạo một bảng trong đó căn chỉnh dọc được đặt thành giữa:

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

Và hơn vị trí của nội dung được tinh chỉnh với lề cũ tốt : 0 tự động; :

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

Fiddle làm việc như đã hứa: http://jsfiddle.net/teDQ2/

Cái tôi có ở đây là một phương thức "trung tâm" để đảm bảo phần tử bạn đang cố định trung tâm không chỉ là định vị "cố định" hay "tuyệt đối", mà còn đảm bảo rằng phần tử bạn định tâm nhỏ hơn phần tử chính của nó, phần trung tâm này và phần tử có liên quan đến cha mẹ, nếu các phần tử cha nhỏ hơn chính phần tử đó, nó sẽ thay đổi DOM cho cha mẹ tiếp theo và căn giữa nó với phần tử đó.

$.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');
        }
    };

tôi sử dụng cái này

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

Vui lòng sử dụng này:

$(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();

bạn đang nhận được sự chuyển đổi kém đó bởi vì bạn đang điều chỉnh vị trí của phần tử mỗi khi cuộn tài liệu. Những gì bạn muốn là sử dụng định vị cố định. Tôi đã thử plugin trung tâm cố định được liệt kê ở trên và điều đó dường như sẽ giải quyết vấn đề độc đáo. Định vị cố định cho phép bạn căn giữa một phần tử một lần và thuộc tính CSS sẽ đảm nhiệm việc duy trì vị trí đó cho bạn mỗi khi bạn cuộn.

Đây là phiên bản của tôi. Tôi có thể thay đổi nó sau khi tôi xem các ví dụ này.

$.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");
    });
};

Không cần jquery cho điều này

Tôi đã sử dụng điều này để tập trung vào yếu tố Div. Phong cách 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;
}

Yếu tố mở

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

});

CẬP NHẬT CỦA TÔI ĐẾN TONY L'S TRẢ LỜI Đây là phiên bản sửa đổi của câu trả lời của anh ấy mà tôi sử dụng một cách tôn giáo. Tôi nghĩ rằng tôi sẽ chia sẻ nó, vì nó bổ sung thêm một chút chức năng cho nó cho các tình huống khác nhau mà bạn có thể có, chẳng hạn như các loại khác nhau positionhoặc chỉ muốn định tâm ngang / dọc thay vì cả hai.

centre.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;
}

Trong tôi <head>:

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

Ví dụ về việc sử dụng:

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

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

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

Nó hoạt động với bất kỳ loại định vị nào và có thể được sử dụng trên toàn bộ trang web của bạn một cách dễ dàng, cũng như dễ dàng di chuyển đến bất kỳ trang web nào bạn tạo. Không có cách giải quyết khó chịu hơn cho trung tâm một cái gì đó đúng.

Hy vọng điều này hữu ích cho ai đó ngoài kia! Thưởng thức.

Rất nhiều cách để làm điều này. Đối tượng của tôi được giữ kín với màn hình: không có gì bên trong thẻ BODY để định vị có liên quan đến BODY. Sau khi sử dụng $ ("# object_id"). Show () , tôi gọi $ ("# object_id"). Center ()

Tôi sử dụng vị trí: tuyệt đối vì có thể, đặc biệt là trên một thiết bị di động nhỏ, cửa sổ phương thức lớn hơn cửa sổ thiết bị, trong trường hợp một số nội dung phương thức có thể không truy cập được nếu định vị được cố định.

Đây là hương vị của tôi dựa trên câu trả lời của người khác và nhu cầu cụ thể của tôi:

$.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;
    };

Bạn có thể sử dụng thuộc tính CSS translate:

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

Đọc bài này để biết thêm chi tiết.

Thông thường, tôi sẽ làm điều này chỉ với CSS ... nhưng vì bạn đã hỏi bạn một cách để làm điều này với jQuery ...

Đoạn mã sau tập trung một div cả theo chiều ngang và chiều dọc bên trong thùng chứa của nó:

$("#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>

(xem thêm Fiddle này )

Giải pháp CSS Chỉ có hai dòng

Nó tập trung div bên trong của bạn theo chiều ngang và chiều dọc.

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

}

chỉ căn chỉnh ngang, thay đổi

margin: 0 auto;

và cho chiều dọc, thay đổi

margin: auto 0;

Chỉ cần nói: $ ("# divID"). Html ($ (''). Html ($ ("# divID"). Html ()));

Tại sao bạn không sử dụng CSS để định tâm div?

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