ฉันจะตั้งค่า<div>ที่กึ่งกลางหน้าจอโดยใช้ jQuery ได้อย่างไร

ฉันชอบเพิ่มฟังก์ชั่นใน 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 pluginที่นี่

VORTION สั้นมาก

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

รุ่น 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);

เปิดใช้งานโดยรหัสนี้:

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

นั่นถูกต้องใช่ไหม ?

อัปเดต:

จากCSS-Tricks

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

ฉันจะแนะนำยูทิลิตี้ตำแหน่ง jQueryUI

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

ซึ่งให้ความเป็นไปได้มากกว่าการเป็นศูนย์กลาง ...

นี่ฉันไปที่มัน ฉันใช้มันเพื่อทำ Lightbox clone ข้อได้เปรียบหลักของการแก้ปัญหานี้คือองค์ประกอบจะอยู่กึ่งกลางโดยอัตโนมัติแม้ว่าหน้าต่างจะถูกปรับขนาดทำให้เหมาะสำหรับการใช้งานประเภทนี้

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

เอกสาร MDN สำหรับcalc()
ตารางสนับสนุนเบราว์เซอร์

ฉันได้รับคำตอบที่ยอดเยี่ยมจาก @TonyL ฉันกำลังเพิ่ม Math.abs () เพื่อตัดค่าและยังคำนึงถึงว่า jQuery อาจอยู่ในโหมด "ไม่มีข้อขัดแย้ง" เช่นใน WordPress

ฉันขอแนะนำให้คุณห่อค่าบนและซ้ายด้วย Math.abs () ตามที่ฉันได้ทำไว้ด้านล่าง หากหน้าต่างมีขนาดเล็กเกินไปและกล่องโต้ตอบโมดอลของคุณมีกล่องปิดด้านบนสิ่งนี้จะป้องกันปัญหาที่จะไม่เห็นกล่องปิด ฟังก์ชั่นของ Tony อาจมีค่าเป็นลบ ตัวอย่างที่ดีเกี่ยวกับวิธีการที่คุณจบลงด้วยค่าลบคือถ้าคุณมีกล่องโต้ตอบขนาดใหญ่อยู่ตรงกลาง แต่ผู้ใช้ปลายทางได้ติดตั้งแถบเครื่องมือหลายอันและ / หรือเพิ่มแบบอักษรเริ่มต้นของเขา - ในกรณีเช่นนี้ ที่ด้านบน) อาจมองไม่เห็นและคลิกได้

สิ่งอื่นที่ฉันทำคือเพิ่มความเร็วขึ้นเล็กน้อยโดยการแคชวัตถุ $ (หน้าต่าง) เพื่อที่ฉันจะลดทราฟฟิก DOM พิเศษและฉันใช้ CSS 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>

หากฉันมี div ที่มี id "test" เพื่อจัดกึ่งกลางสคริปต์ต่อไปนี้จะจัดกึ่งกลาง div ในหน้าต่างของเอกสารให้พร้อม (ค่าเริ่มต้นสำหรับ "ของฉัน" และ "ที่" ในตัวเลือกตำแหน่งคือ "ศูนย์")

<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.heightเป็น600
this.heightคือ650

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 booleans ถ้าคุณต้องการจัดกึ่งกลางในแนวตั้ง แต่ไม่ใช่แนวนอนตัวอย่างเช่น:

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

คุณต้องใส่margin: 0เพื่อแยกระยะขอบเนื้อหาออกจากความกว้าง / ความสูง (เนื่องจากเราใช้ตำแหน่งที่คงที่โดยไม่มีระยะห่างที่เหมาะสม) ตามเอกสาร jQuery ที่ใช้.outerWidth(true)ควรมีระยะขอบ แต่มันไม่ทำงานอย่างที่คาดไว้เมื่อฉันลองใช้ Chrome

50*(1-ratio)มาจาก:

ความกว้างหน้าต่าง: W = 100%

ความกว้างขององค์ประกอบ (เป็น%): w = 100 * elementWidthInPixels/windowWidthInPixels

พวกเขาจะเผาที่เหลือเป็นศูนย์กลาง:

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

มันเยี่ยมมาก ฉันเพิ่มฟังก์ชั่นการโทรกลับ

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

แก้ไข:

หากคำถามสอนอะไรฉันให้ทำสิ่งนี้: อย่าเปลี่ยนสิ่งที่ใช้ได้แล้ว :)

ฉันให้ (เกือบ) สำเนาคำต่อคำของวิธีการนี้ได้รับการจัดการในhttp://www.jakpsatweb.cz/css/css-vertical-center-solution.html - มัน hacked อย่างหนักสำหรับ 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 จากเช็กและทำให้มันกลายเป็นซอที่ใช้งานได้ เรื่องสั้นสั้นเราสร้างตารางที่จัดเรียงแนวตั้งไว้ตรงกลาง:

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

});

การอัปเดตของฉันเป็นคำตอบของโทนี่ L นี่คือคำตอบเวอร์ชันดัดแปลงของฉันที่ฉันใช้อย่างเคร่งครัดตอนนี้ ฉันคิดว่าฉันจะแบ่งปันเพราะจะเพิ่มการทำงานให้กับสถานการณ์ที่คุณมีอยู่เล็กน้อยเช่นประเภทต่าง ๆ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")

สามารถใช้งานได้กับทุกประเภทการวางตำแหน่งและสามารถใช้ได้ทั่วทั้งไซต์ของคุณได้อย่างง่ายดายรวมถึงพกพาไปยังไซต์อื่น ๆ ที่คุณสร้าง ไม่มีวิธีแก้ปัญหาที่น่ารำคาญสำหรับการจัดวางบางสิ่งบางอย่างอย่างเหมาะสม

หวังว่านี่จะเป็นประโยชน์สำหรับใครบางคนที่นั่น! สนุก.

หลายวิธีในการทำเช่นนี้ วัตถุของฉันถูกซ่อนไว้ด้วยจอแสดงผล: ไม่มีภายในแท็ก BODY เท่านั้นดังนั้นการวางตำแหน่งจะสัมพันธ์กับ BODY หลังจากใช้$ ("# object_id"). show ()ฉันโทร$ ("# object_id"). center ()

ฉันใช้ตำแหน่ง: แน่นอนเพราะเป็นไปได้โดยเฉพาะอย่างยิ่งในอุปกรณ์พกพาขนาดเล็กว่าหน้าต่าง modal นั้นใหญ่กว่าหน้าต่างอุปกรณ์ซึ่งในกรณีนี้เนื้อหา modal บางส่วนอาจไม่สามารถเข้าถึงได้หากการแก้ไขตำแหน่งถูกแก้ไข

นี่คือรสชาติของฉันตามคำตอบของผู้อื่นและความต้องการเฉพาะของฉัน:

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

คุณสามารถใช้translateคุณสมบัติCSS :

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