<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プラグインを入れましたここに

非常に短いバージョン

$('#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ユーティリティをお勧めします

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

これは、センタリングだけではない、はるかに多くの可能性を与えます

これが私の挑戦です。私はそれを私のライトボックスクローンに使用することになりました。このソリューションの主な利点は、ウィンドウのサイズが変更されても、要素が自動的に中央に配置されたままになるため、このような使用法に最適です。

$.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（）でラップすることをお勧めします。ウィンドウが小さすぎて、モーダルダイアログの上部にクローズボックスがある場合は、クローズボックスが表示されないという問題を回避できます。トニーの関数は、潜在的に負の値を持っていたでしょう。負の値になる方法の良い例は、中央に大きなダイアログがあり、エンドユーザーがいくつかのツールバーをインストールしたり、デフォルトのフォントを増やしたりした場合です。このような場合、モーダルダイアログのクローズボックス（上部）は表示されず、クリックできない場合があります。

もう1つのことは、余分なDOMトラバーサルを減らすために$（window）オブジェクトをキャッシュしてこれを少し高速化し、クラスター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>

中央に「test」というIDのdivがある場合、次のスクリプトは、ウィンドウの中央のdivをドキュメントの中央に配置して準備ができています。（位置オプションの「my」と「at」のデフォルト値は「center」です）

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

1つの問題を修正したいと思います。

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ブール値を渡すためのパラメーターを追加しました。次に例を示します。

// 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 docによれば、.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でどのように処理されたかの（ほぼ）逐語的なコピーを提供しています-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/

私はこれをbrowsershotsで実行しましたが、問題ないようです。他に何もない場合は、CSS仕様で規定されているマージンの割合の処理が日の目を見るように、以下を元のままにします。

元の：

パーティーに遅れそうだ！

これは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ドコを信用していない場合は、コンテンツの幅を調整して上記のフィドルを試してみてください。

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 autoで微調整されます。：

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

文書がスクロールされるたびに要素の位置を調整しているため、この移行はうまくいきません。必要なのは、固定配置を使用することです。上記の固定センタープラグインを試してみましたが、問題はうまく解決しているようです。固定位置では、要素を1回中央に配置でき、スクロールするたびに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);
    });

});

TONY L'S ANSWERへの私の更新 これは私が今信仰的に使用している彼の回答の改造版です。さまざまな種類の状況など、さまざまな状況で機能が少し追加されるので、私はそれを共有すると思いました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タグのすぐ内側にdisplay：noneで非表示にされているため、配置は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ソリューション 2行のみ

内側のdivを水平および垂直に集中化します。

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

}

水平位置合わせのみ、変更

margin: 0 auto;

垂直の場合、変更

margin: auto 0;

次のように言うだけです：$（ "＃divID"）。html（$（ ''）。html（$（ "＃divID"）。html（）））;

divの中央揃えにCSSを使用しないのはなぜですか？

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