Die Verwendung von jQuery zum zentrieren eines DIV auf dem Bildschirm
https://stackoverflow.com/questions/210717
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie tun ich gehen über die Einstellung eines <div> in der Mitte des Bildschirms mithilfe von jQuery?
Lösung
Ich mag das Hinzufügen Funktion jQuery so würde diese Funktion helfen:
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;
}
Jetzt können wir nur schreiben:
$(element).center();
Demo: Fiddle (mit Zusatz-Parameter)
Andere Tipps
Ich habe ein jQuery-Plugin hier
SEHR KURZFASSUNG
$('#myDiv').css({top:'50%',left:'50%',margin:'-'+($('#myDiv').height() / 2)+'px 0 0 -'+($('#myDiv').width() / 2)+'px'});
KURZFASSUNG
(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);
durch diesen Code aktiviert:
$('#mainDiv').center();
PLUGIN VERSION
(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);
durch diesen Code aktiviert:
$(document).ready(function(){
$('#mainDiv').center();
$(window).bind('resize', function() {
$('#mainDiv').center({transition:300});
});
);
ist das richtig?
UPDATE:
.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* Yep! */
width: 48%;
height: 59%;
}
Ich würde empfehlen, jQueryUI Position Dienstprogramm
$('your-selector').position({
of: $(window)
});
was gibt Ihnen viel mehr Möglichkeiten als nur Zentrierung ...
Hier ist mein geht an ihn. Ich landete es für meine Lightbox Klon verwenden. Der wesentliche Vorteil dieser Lösung besteht darin, dass das Element automatisch selbst zentriert wird bleiben, wenn die Fenstergröße verändert wird, so dass es ideal für diese Art der Nutzung.
$.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;
}
Sie können mit CSS allein wie so zum Zentrum:
.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() können Ihnen grundlegende Berechnungen in CSS tun.
Ich erweitere auf die große Antwort von @TonyL gegeben. Ich füge Math.abs (), um die Werte zu wickeln, und auch nehme ich zu berücksichtigen, dass jQuery in „kein Konflikt“ -Modus sein könnte, wie zum Beispiel in Wordpress.
Ich empfehle Ihnen, die oberen und linken Werte mit Math.abs wickeln () wie ich weiter unten getan haben. Wenn das Fenster zu klein ist, und Ihr modaler Dialog hat oben eine enge Box, wird dies das Problem nicht verhindern, dass das Schließfeld zu sehen. Tonys Funktion hätte möglicherweise negative Werte hatte. Ein gutes Beispiel dafür, wie man mit negativen Werten am Ende ist, wenn Sie einen großen zentrierten Dialog aber der Endbenutzer hat mehrere Symbolleisten und / oder erhöhte seine Standardschriftart installiert - in einem solchen Fall das Schließfeld auf einem modalen Dialog (wenn am oberen Rand) möglicherweise nicht sichtbar und anklickbar sein.
Das andere, was ich tun dies etwas hoch ist die Geschwindigkeit durch Caching der $ (Fenster) Objekt so, dass ich zusätzliche DOM Traversierungen reduzieren, und ich verwende einen Cluster 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;
}
verwenden, würden Sie so etwas wie:
jQuery(document).ready(function($){
$('#myelem').center();
});
Ich würde die jQuery UI position Funktion.
<div id="test" style="position:absolute;background-color:blue;color:white">
test div to center in window
</div>
Wenn ich ein div mit der ID „test“ zum Zentrum habe dann das folgende Skript würde Zentrieren Sie das div im Fenster Dokument bereit. (Die Standardwerte für „mein“ und „in“ in der Position Optionen sind „center“)
<script type="text/javascript">
$(function(){
$("#test").position({
of: $(window)
});
};
</script>
Ich möchte ein Problem beheben.
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
über Code wird nicht in Fällen funktionieren, wenn this.height (davon ausgehen kann, dass Benutzer den Bildschirm passen die Größe und Inhalt ist dynamisch) und scrollTop() = 0, Beispiel:
window.height ist 600
this.height ist 650
600 - 650 = -50
-50 / 2 = -25
Jetzt ist die Box zentriert -25 Offscreen.
Ich denke nicht, eine absolute Position, die am besten wäre, wenn Sie ein Element wollen immer in der Mitte der Seite zentriert. Sie wollen wahrscheinlich ein festes Element. Ich fand eine andere jquery Zentrierung Plugin, die feste Positionierung verwendet. Es heißt Fest rel="noreferrer">.
Dies ist nicht getestet, aber so etwas wie dies sollte funktionieren.
var myElement = $('#myElement');
myElement.css({
position: 'absolute',
left: '50%',
'margin-left': 0 - (myElement.width() / 2)
});
Die Übergangskomponente dieser Funktion arbeitete für mich wirklich schlecht in Chrome (nicht an anderer Stelle testen). Ich würde die Größe des Fensters ein Bündel und mein Element würde langsam Art von Scoot sich um und versuchte bis zu fangen.
So ist die folgende Funktion, dass ein Teil kommentiert werden. Darüber hinaus habe ich Parameter für in optional x & y booleans vorbei, wenn Sie vertikal zentrieren möchten, aber nicht horizontal, zum Beispiel:
// 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);
das Element relativ zu dem Browser-Ansichtsfenster (Fenster) zu zentrieren, nicht position: absolute verwenden, der korrekte Positionswert sollte fixed (absolute Mittel sein: „Das Element positioniert ist, relativ zu seinem ersten positionierte (nicht statisch) Vorfahr-Elemente“ ).
Diese alternative Version der vorgeschlagenen Zentrum Plugin verwendet „%“ anstelle von „px“ so, wenn Sie die Größe des Fensters wird der Inhalt zentriert halten:
$.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;
}
Sie müssen margin: 0 setzen den Inhalt Ränder von der Breite / Höhe auszuschließen (da wir Position verwenden fixierte, mit Margen keinen Sinn macht).
Nach dem jQuery doc .outerWidth(true) verwenden, sollten die Margen enthalten, aber es hat nicht funktioniert wie erwartet, wenn ich in Chrome versucht.
Die 50*(1-ratio) kommt aus:
Fensterbreite: W = 100%
Element Breite (in%): w = 100 * elementWidthInPixels/windowWidthInPixels
Them die zentrierte links calculé:
left = W/2 - w/2 = 50 - 50 * elementWidthInPixels/windowWidthInPixels =
= 50 * (1-elementWidthInPixels/windowWidthInPixels)
Das ist großartig. Ich habe eine Callback-Funktion
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
}
}
Edit:
Wenn die Frage mir etwas gelehrt, es ist dies: nicht etwas ändern, das bereits funktioniert:)
Ich bin Bereitstellung einer (fast) wörtlich Kopie davon, wie diese auf http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - es ist schwer für IE gehackt, sondern bietet einen reinen CSS Weg, um die Frage zu beantworten:
.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;}
Fiddle: http://jsfiddle.net/S9upd/4/
Ich habe dies durch Browsershots laufen und es scheint in Ordnung; wenn für nichts anderes, werde ich das Original unten halten, so dass Marge Handhabung wie durch CSS-Spezifikation diktierte das Licht der Welt erblickt.
Original:
Sieht aus wie ich bin zu spät zur Party!
Es gibt einige Kommentare über, dass dies vorschlagen, eine CSS-Frage - Trennung von Bedenken und alle. Lassen Sie mich das Vorwegnehmen, dass CSS sagen wirklich sich auf diesen einen in den Fuß geschossen. Ich meine, wie einfach wäre es, dies zu tun:
.container {
position:absolute;
left: 50%;
top: 50%;
overflow:visible;
}
.content {
position:relative;
margin:-50% 50% 50% -50%;
}
Richtig? Container des obere linke Ecke in der Mitte des Bildschirms wäre, und mit negativen Margen der Inhalt in der absoluten Mitte der Seite auf magische Weise wieder erscheinen! http://jsfiddle.net/rJPPc/
Falsch! horizontale Positionierung ist in Ordnung, aber vertikal ... Oh, ich sehe. Offenbar in CSS, wenn oberen Ränder in% einstellen, wird der Wert berechnet als Prozentsatz immer relativ auf die Breite des umschließenden Blocks . Wie Äpfel und Orangen! Wenn Sie mir oder Mozilla doco nicht vertrauen, hat ein Spiel mit der Geige oben Inhaltsbreite eingestellt und staunt.
Jetzt, mit CSS mein Brot und Butter zu sein, war ich nicht aufgeben zu. Zur gleichen Zeit, ziehe ich die Dinge einfach, also habe ich die Ergebnisse einer Czech CSS-Guru und machte es in eine Arbeits Geige. Lange Rede kurzer Sinn, wir erstellen eine Tabelle, in der vertical-align auf Mitte eingestellt ist:
<table class="super-centered"><tr><td>
<div class="content">
<p>I am centered like a boss!</p>
</div>
</td></tr></table>
Und als die Position der Inhalte ist fein abgestimmt mit dem guten alten margin: 0 auto; :
.super-centered {position:absolute; width:100%;height:100%;vertical-align:middle;}
.content {margin:0 auto;width:200px;}
Arbeits Geige, wie versprochen: http://jsfiddle.net/teDQ2/
Was ich habe, ist hier eine „center“ Methode, die das Element stellt sicher, Sie Zentrum versuchen, ist nicht nur von „fester“ oder „absoluten“ Positionierung, sondern sorgt auch, dass das Element Sie Zentrieren kleiner als ihre Mutter Dieses relativ Zentren und Element sind Eltern, wenn die Elemente Mutter kleiner als das Element selbst ist, wird es den DOM in den nächsten übergeordneten pillage auf und zentriert es, dass relativ.
$.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');
}
};
Ich benutze diese:
$(function() {
$('#divId').css({
'left' : '50%',
'top' : '50%',
'position' : 'absolute',
'margin-left' : -$('#divId').outerWidth()/2,
'margin-top' : -$('#divId').outerHeight()/2
});
});
Bitte verwenden Sie diese:
$(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();
Sie bekommen, dass eine schlechte Übergang, weil Sie die Position des Elements sind Einstellung jedes Mal das Dokument gescrollt wird. Was Sie wollen, ist feste Positionierung zu verwenden. Ich habe versucht, die feste Zentrum Plugin oben aufgeführten und das scheint das Problem schön zu tun zu lösen. Feste Positionierung ermöglicht es Ihnen, sobald ein Element zu zentrieren, und die CSS-Eigenschaft wird für Sie sorgen dafür, dass Position beibehalten, jedesmal wenn Sie blättern.
Hier ist meine Version. Ich kann es ändern, nachdem ich an diesen Beispielen sehen.
$.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");
});
};
Keine Notwendigkeit jquery für dieses
Ich habe diese zum Zentrum Div-Elemente. Css Style,
.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;
}
Öffnen Element
$(document).ready(function(){
$(".open").click(function(e){
$(".black_overlay").fadeIn(200);
});
});
MY UPDATE ZU TONY L'S ANTWORT
Dies ist die modded Version seiner Antwort, die ich religiös jetzt verwenden. Ich dachte, ich würde es teilen, da es etwas mehr Funktionalität, um es für verschiedene Situationen fügt können Sie, wie verschiedene Arten von position haben oder nur horizontale / vertikale Zentrierung zu wollen, anstatt beides.
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;
}
In meinem <head>:
<script src="scripts/center.js"></script>
Anwendungsbeispiele:
$("#example1").centerHor("absolute")
$("#example2").centerHor("fixed")
$("#example3").centerVer("absolute")
$("#example4").centerVer("fixed")
$("#example5").center("absolute")
$("#example6").center("fixed")
Es funktioniert mit jedem Positioniertyp und kann in Ihrer gesamten Website einfach sowie leicht tragbar zu anderen Websites verwendet werden, die Sie erstellen. Kein lästiges Abhilfe für etwas richtig zentriert.
Hoffe, dass dies für jemanden nützlich ist, da draußen! Genießen Sie.
Viele Möglichkeiten, dies zu tun.Mein Objekt ist verborgen mit display:none nur innerhalb des BODY-Tags so, dass die Positionierung relativ zum KÖRPER.Nach der Verwendung $("#object_id").show(), Rufe ich $("#object_id").center()
Ich benutze position:absolute weil es möglich ist, vor allem auf einem kleinen mobilen Gerät, das das modale Fenster ist größer als das Gerät-Fenster, in welchem Fall einige der modale Inhalt konnte nicht zugegriffen werden, wenn die Positionierung, wurde behoben.
Hier ist mein Geschmack, basierend auf anderen Antworten und meine spezifischen Anforderungen:
$.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;
};
Normalerweise würde ich mit CSS dies nur ... aber da Sie gebeten, eine Möglichkeit, dies mit jQuery zu tun ...
Der folgende Code-Zentren ein div sowohl horizontal als auch vertikal innerhalb Behälter:
$("#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>
(siehe auch dieses Fiddle )
CSS-Lösung In zwei Zeilen nur
Es zentralisiert Ihre inneren div horizontal und vertikal.
#outer{
display: flex;
}
#inner{
margin: auto;
}
für nur horizontal ausrichten, ändern
margin: 0 auto;
und für vertikale, ändert
margin: auto 0;
Sie können die CSS translate Eigenschaft verwenden:
position: absolute;
transform: translate(-50%, -50%);
