私は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();
デモ： Fiddle （追加パラメータあり）
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)
});
これは、センタリングだけではなく、もっと多くの可能性をもたらします。
これが私のやり方です。私は私の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で基本的な計算をすることを可能にします。
私は@TonyLによって与えられた素晴らしい答えを拡大しています。値をラップするためにMath.abs（）を追加しています。また、WordPressのように、jQueryが「競合しない」モードになっている可能性があることも考慮しています。
下記のように、上と左の値をMath.abs（）でラップすることをお勧めします。ウィンドウが小さすぎ、モーダルダイアログの上部にクローズボックスがある場合は、クローズボックスが表示されないという問題を防ぐことができます。トニーの機能は潜在的に負の値を持っていたでしょう。大きな値のダイアログが中央に表示されていても、エンドユーザーがいくつかのツールバーをインストールしたりデフォルトフォントを増やしたりした場合は、負の値になることがよくあります。上部）が表示されずクリックできない場合があります。
私がもう一つすることは、余分な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 UIposition関数を使用します。
<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.heightは600ですthis.heightは650です
600 - 650 = -50
-50 / 2 = -25
これで、ボックスは画面外の-25に配置されました。
絶対位置を持つことが、ページの中央に常に要素を配置したい場合には最適ではないと思います。あなたはおそらく固定要素が欲しいです。私は固定位置を使用する別のjqueryセンタリングプラグインを見つけました。 fixed center と呼ばれます。
これはテストされていませんが、このようなものでうまくいくはずです。
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
ブラウザのビューポート（ウィンドウ）を基準にして要素を中央に配置するには、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)
この関数のtransitionコンポーネントは、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);
編集する
質問が私に何か教えてくれたら、それはこれです：すでに動いているものを変更しないでください:)
私はこれがどのように扱われたかの（ほぼ）逐語的コピーを提供しています 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では、上マージンを％で設定すると、値は 包含ブロックの width に対する相対パーセンテージ として計算されます。りんごやオレンジのように！あなたが私やMozillaドコを信頼していないのなら、コンテンツの幅を調整して上記のフィドルでプレーしてください。
今、CSSが私のパンとバターであり、私はあきらめようとしていなかった。同時に、私は物事が簡単であることを好むので、私は チェコのCSS教祖 の発見を借りて、そしてそれを実用的な謎にしました。手短に言えば、vertical-alignがmiddleに設定されているテーブルを作成します。
<table class="super-centered"><tr><td>
<div class="content">
<p>I am centered like a boss!</p>
</div>
</td></tr></table>
そしてコンテンツの位置は古き良きもので微調整されています margin：0 auto; ：
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
約束されたように作業フィドル： http://jsfiddle.net/teDQ2/ /
これは素晴らしい。コールバック関数を追加しました
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
}
}
ここで私が持っているのはあなたがセンタリングしようとしている要素が "固定"または "絶対"ポジショニングのものであることを保証するだけではなくそして親要素が親要素である場合、親要素がその要素自体より小さい場合は、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');
}
};
これを使ってください。
$(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();
私はこれを使う：
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
通常、私は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>（ this Fiddle も参照）
CSSソリューション 2行のみ -
それはあなたの内側divを水平方向と垂直方向に集中させる.
#outer{
display: flex;
}
#inner{
margin: auto;
}
水平方向にのみ配置、変更
margin: 0 auto;
そして垂直の場合は、変更
margin: auto 0;
このために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);
});
});
これが私のバージョンです。これらの例を見た後に変更することがあります。
$.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");
});
};
私の答えを全部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")
それはどんなポジショニングタイプでも動作します、そしてあなたが作成する他のどのサイトにも簡単に持ち運びできるだけでなく、あなたのサイト全体を通して簡単に使用することができます。何かを正しくセンタリングするための煩わしい回避策はもうありません。
これが誰かに役立つことを願っています！楽しい。
ドキュメントがスクロールされるたびに要素の位置を調整しているため、このような移行はうまくいきません。あなたが欲しいのは固定位置を使うことです。私は上記の固定センタープラグインを試してみましたが、それは問題をうまく解決しているようです。固定位置を使用すると、要素を一度中央に配置できます。CSSプロパティは、スクロールするたびにその位置を維持します。
これを行う方法はたくさんあります。私のオブジェクトは 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;
};