jQuery を使用して DIV を画面の中央に配置する
https://stackoverflow.com/questions/210717
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
を設定するにはどうすればよいですか <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});
});
);
そうですか？
更新：
から.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
$('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;
}
@TonyLのすばらしい答えを拡大しています。 Math.abs（）を追加して値をラップしています。また、jQueryが<！> quot; no conflict <！> quot;にある可能性があることも考慮しています。たとえばWordPressのようなモード。
以下で行ったように、Math.abs（）で上部と左側の値をラップすることをお勧めします。ウィンドウが小さすぎて、モーダルダイアログの上部に閉じるボックスがある場合、これは閉じるボックスが表示されないという問題を防ぎます。トニーの関数には、潜在的に負の値があります。負の値で終わる方法の良い例は、大きな中央揃えのダイアログがあるが、エンドユーザーがいくつかのツールバーをインストールし、および/またはデフォルトフォントを増やした場合です-そのような場合、モーダルダイアログのクローズボックス（上部）が表示されず、クリックできない場合があります。
もう1つのことは、$（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 <！> quot; test <！> quot;のdivがある場合中央揃えにすると、次のスクリプトは、divをウィンドウの中央に配置してドキュメントの準備ができます。 （位置オプションの<！> quot; my <！> quot;および<！> quot; at <！> quot;のデフォルト値は<！> quot; center <！> quot;）
<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
です
650は-25
600 - 650 = -50
-50 / 2 = -25
ボックスの中央が<=>画面外になりました。
要素を常にページの中央に配置する場合は、絶対位置を設定することをお勧めします。おそらく固定要素が必要でしょう。固定位置を使用する別のjqueryセンタリングプラグインを見つけました。 固定センターと呼ばれます。
これはテストされていませんが、このようなものは機能するはずです。
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
この関数の移行コンポーネントは、Chromeで私には本当にうまく機能しませんでした（他の場所ではテストしませんでした）。私はたくさんのウィンドウのサイズを変更し、私の要素はゆっくりと動き回って追いつきます。
したがって、次の関数はコメントアウトしています。さらに、オプションのx <！> ampを渡すためのパラメーターを追加しました。 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にする必要があります（絶対的な意味：<！> quot;要素は最初の要素に対して相対的に配置されます配置された（静的ではない）先祖要素<！> quot;）。
提案されたセンタープラグインのこの代替バージョンは、<！> quot;％<！> quot;を使用します。代わりに<！> quot; px <！> quot;したがって、ウィンドウのサイズを変更しても、コンテンツは中央に保持されます。
$.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 -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がこの1つに足を踏み入れた本当にと言ってみましょう。つまり、これを行うのはどれほど簡単でしょうか。
.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>
そして、コンテンツの位置は古き良き margin：0 auto; ：
で微調整されます.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
約束どおりの作業フィドル： http://jsfiddle.net/teDQ2/
ここにあるのは<！> quot; center <！> quot;センタリングしようとしている要素が<！> quot; fixed <！> quotだけではないことを保証するメソッドまたは<！> quot; absolute <！> quot;配置しますが、センタリングしている要素がその親よりも小さいことも保証します。この中心と相対的な要素は親です、要素の親が要素自体よりも小さい場合、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');
}
};
iを使用：
$(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);
});
});
トニー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()
私が使う 位置:絶対 特に小型のモバイル デバイスでは、モーダル ウィンドウがデバイス ウィンドウよりも大きい可能性があり、その場合、位置が固定されているとモーダル コンテンツの一部にアクセスできなくなる可能性があります。
他の人の回答と私の具体的なニーズに基づいた私の好みは次のとおりです。
$.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のみでこれを行いますが、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;
CSS translateプロパティを使用できます：
position: absolute;
transform: translate(-50%, -50%);
divの中央揃えにCSSを使用しない理由#timer_wrap{
position: fixed;
left: 50%;
top: 50%;
}
