Center position:fixed element

Ich würde gerne eine position: fixed; popup-Fenster zentriert auf dem Bildschirm mit einer dynamischen Breite und Höhe. Ich verwendet margin: 5% auto; für diese. Ohne position: fixed; it-Zentren fine horizontal, aber nicht vertikal. Nach dem hinzufügen position: fixed;, ist es auch gar nicht zentrieren horizontal.

Hier das komplette set:

CSS:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

HTML:

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

Wie kann ich die center dieses Feld im Bildschirm mit CSS?

InformationsquelleAutor saturngod | 2010-01-05
  1. 533

    Dass Sie im Grunde benötigen, um top und left zu 50% zur Mitte der linken oberen Ecke des div. Sie müssen auch die margin-top und margin-left um die negative Hälfte des div-height-und width-Verschiebung der Mitte in Richtung der Mitte des div.

    So, vorausgesetzt, eine <!DOCTYPE html> (standards-Modus), sollte dies tun:

    position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

    Oder, wenn Sie nicht kümmern, über das zentrieren vertikal und alten Browsern wie dem IE6/7 verwenden, dann können Sie stattdessen auch hinzufügen left: 0 und right: 0 um das element mit einem margin-left und margin-right von auto, so dass das fest positionierte element mit einer festen Breite weiß, wo Links und rechts offsets beginnen. In deinem Fall also:

    position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

    Wieder, das funktioniert nur im IE8+, wenn Sie sich über IE, und diese Zentren nur horizontal, nicht vertikal.

    • Ich fand, dass der trick in css-tricks.com/.... Aber wenn ich die Breite ändern und die Höhe, es sich nicht bewegt-center. Ya, ich sollte ändern Sie die margin-left und top, wenn ändern der Höhe und Breite.
    • genial. Nur funktioniert.
    • Zur info: dies wird korrekt position Dinge in der Mitte, aber leider verlieren Sie die scroll-bars - alle Inhalte, die abgeschnitten von der viewport nicht erreichbar sein, auch wenn Sie scrollen, weil die festen Stellung bezogen auf den viewport, nicht auf die Seite. So weit, die einzige Lösung, die ich gefunden habe, ist, dass Sie mit javascript.
    • Groxx ich denke, Sie setzen könnte, scroll-Balken innerhalb eines div in das pop-up mit dem overflow-Eigenschaft.
    • Neben der, für diese müssen Sie wissen, die Breite des Elements.
    • Für einige Grund der margin-top und margin-left sind nicht für mich arbeiten. Aber die alternative in dem Beitrag, den Sie verlinkt (übersetzen -50% -50%) hat einwandfrei funktioniert
    • wie bereits im Artikel, es ist nur notwendig, wenn das element nicht eine Feste Breite/Höhe. Aber in OP ' s Fall, das element hat eine Feste Breite/Höhe, so dass die translate ist unnötig.
    • Schöne Kombination von margin: x auto mit Links:0 rechts:0 😉 hat einwandfrei funktioniert!
    • Nicht sicher, warum diese so viele Stimmen. Es tut center korrekt, wenn das div ist größer als 200px (Höhe, aber gleiche Breite)
    • BalusC: Arroganz. Ich lese es ,ja: "die margin-top und margin-left auf die negative Hälfte des div-height-und width-Verschiebung der Mitte in Richtung der Mitte der div." -- so, das macht es statische Breite und Höhe, richtig? Haben Sie bemerkt, die Frage konkret genannten dynamischen?
    • betrifft das den Bildschirm, nicht das element. So das element zentriert wird, auch wenn der Bildschirm ändert. Haben Sie Lesen die Frage, den code zu? Das element hat eine Feste Breite/Höhe. Nicht sicher, warum sind Sie so negativ.
    • ah. nm, wenn das ist der Fall, ich meine natürlich die browser-Größe wird dynamisch sein, nicht sicher, warum, dass war die Frage. stattdessen dachte ich, er meinte, dass der popup-Maße, die benötigt werden, dynamisch. das ist der Fall für mich so im mit transform: translate(-50%, -50%); funktioniert Super, außer nicht auf IE8.

    InformationsquelleAutor BalusC
  2. 259

    Ich möchte ein popup-Fenster zentriert auf dem Bildschirm mit dynamischer Breite und Höhe.

    Hier ist ein moderner Ansatz für horizontal zentrieren eines Elements mit einer Breite dynamisch - es funktioniert in allen modernen Browsern; Unterstützung können hier eingesehen werden.

    Aktualisiert-Beispiel

    .jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

    Sowohl für vertikale und horizontale Zentrierung könnten Sie Folgendes verwenden:

    Aktualisiert-Beispiel

    .jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

    Möchten Sie vielleicht hinzufügen, in mehr vendor-Präfix-Eigenschaften zu (siehe Beispiele).

    • perfekt für element ohne width angegeben.
    • diese vermasselt chrome. für sehr lange divs, warum auch immer, es beginnt zu Gang.
    • Kannst du bitte ein Beispiel geben?
    • Ich bin mit diesem Ansatz für die horizontal-center-ein festes Bild positioniert, deren Breite größer ist als die Fensterbreite und arbeiten gut atleast in aktuellen Firefox, Chrome, IE 11 und Edge-Versionen.
    • In meinen Tests funktioniert das sehr gut (hinter den Präfixen), Win10 Edge 14, Win7 IE9+, Win10 Chrome, OSX, Chrome, iPad 4 Chrome & Safari, Android 4.4+ Chrome. Nur Misserfolg für mich war Android 4.0, wo die übersetzung nicht auftreten.
    • das funktioniert in der desktop-Browsern wie Chrome 61, Safari 11 und FireFox 65, aber nicht in Chrom 61 auf Android 6, die akzeptierten Antworten in allen Browsern funktioniert.
    • Das macht die Bilder verschwommen in Chrom.
    • Irgendwie einzige Ansatz, der arbeitete ordnungsgemäße über alle browser mit meine img. Dank einem Haufen!
    • Dies schien wirklich gut zu funktionieren auf den ersten, aber... jeder, der mit der drag-und-drop-Elemente auf Ihren Seiten Achtung: diese Methode erstellt Probleme mit SortableJS für mich. Die Elemente gezogen werden würde, sobald er schnappte sich, springen auf den original Positionen vor transform wird berechnet. Ich bin jetzt mit einer variation Wird Prescot Antwort statt, mit keine Probleme bisher.

    InformationsquelleAutor Josh Crozier
  3. 127

    Oder fügen Sie einfach left: 0 und right: 0 auf Ihre original-CSS, das macht es Verhalten sich ähnlich zu einem normalen nicht-festen element und den üblichen auto-margin-Technik funktioniert:

    .jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

    Hinweis: Sie benötigen ein gültiges (X)HTML - DOCTYPE für die es sich zu Verhalten korrekt im IE (und das sollten Sie natürlich sowieso..!)

    • In welchem Sinne? Das übergeordnete element ist das body-element, das keine Grenzen kennt. Wenn Sie Hinzugefügt Grenze Eigenschaften der Körper (?!) dann sicher, dass es betroffen wäre, als würde die 50% Technik, die ich vorstellen. Ich versichere Ihnen, es funktioniert gut mit den gegebenen Parametern nur überprüft in jedem browser, die ich griffbereit haben, und hat den zusätzlichen Vorteil, nicht abhängig von der Breite des Elements.
    • Alles, was ich Tat, war fügen Sie diese 2 Eigenschaften und einen doctype zu den OP ' s Beispiel HTML. Allerdings auf weitere Tests scheint es, dass IE7 (oder 8 im compat-Modus) ist das problem - es scheint Sie nicht respektieren Sie den Wert der right Eigenschaft, wenn left ist auch eingestellt! ( msdn.microsoft.com/en-us/library/... stellt fest, dass left und right nur "teilweise" Unterstützung im IE7). OK, ich gebe zu, diese Lösung ist nicht gut, wenn die IE7-Unterstützung ist wichtig, aber ein toller trick merken für die Zukunft 🙂
    • dies sollte die akzeptierte Antwort. Ich hatte zwei Feste Positionen, eine für die Deckkraftmaske anderen für den modalen. dies war der einzige Weg, ich könnte Zentrum die Feste position modal in der Mitte des Bildschirms. Ehrfürchtige Antwort, wer hätte das gedacht?
    • Danke, ich glaube, ich war gerade 4 Jahre vor meiner Zeit, dass man mit 🙂
    • Ich bin damit einverstanden, sollte dies die akzeptierte Antwort. Es funktioniert perfekt im responsive design, denn es ist nicht abhängig von der Breite.
    • Ich würde vorschlagen, einfache Antwort, wie einige der css ist nur relevant für die OP. Alles, was Sie brauchen, ist position: fixed; left: 0; right: 0; margin: 0 auto; .
    • Geniale Lösung
    • Kann mir jemand erklären, warum hinzufügen left und right macht margin:0 auto Arbeit?
    • Da margin: auto Zentren horizontal eine Feste/absolut positioniertes element nur, wenn Werte von left, right und width auf dieses element nicht auto.
    • Arbeitete für mich mit einem width:100%; und ein max-width:1280px;
    • Vielen Dank für die Rettung meines Lebens 😛

    InformationsquelleAutor Will Prescott
  4. 21

    Fügen Sie einen container wie:

    div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

    Dann setzen Sie Ihre box in diesem div wird die Arbeit zu tun.

    • "text-align: center" funktionierte bei mir nicht in die Zentrierung der interne div.
    • Die innere box muss display: inline-block für diese zu arbeiten. (Einige andere Werte anzeigen könnte ebenfalls funktionieren, wie table.)
    • ein besserer Ansatz, um die oben genannten css würde das hinzufügen margin:auto; und ändern von Breite zu width:50% oder width:400px. anschließend können die Inhalte direkt text, block-Elemente oder inline-Elemente.
    InformationsquelleAutor Romulus Urakagi Ts'ai
  5. 14

    Nur hinzufügen:

    left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
    • Das funktioniert nicht mit position: fixed, das ist, was die Frage ist. Wenn ich falsch bin, bitte Bearbeiten Sie die Antwort, um eine ausführbare code-snippet.
    • es funktioniert Super mit position fixed.
    • dies funktioniert, wenn Sie die Breite des Elements
    • Ich fügte text-align: center; damit es funktioniert
    • Es funktioniert mit position: fixed, sofern festgelegt, die max-width oder width um das element.
    InformationsquelleAutor Bob
  6. 5

    Diese Lösung erfordert keine Sie zum festlegen der Breite und Höhe, um Ihren popup-div.

    http://jsfiddle.net/4Ly4B/33/

    Und statt der Berechnung die Größe des popup -, und minus der Hälfte an die Spitze, javascript resizeing der popupContainer, um den gesamten Bildschirm ausfüllt...

    (100% Höhe funktioniert nicht, wenn mit display:table-cell; (wich ist erforderlich, um die Mitte etwas vertikal))...

    Wie auch immer es funktioniert 🙂

    InformationsquelleAutor BjarkeCK
  7. 4
    left: 0;
right: 0;

    War funktioniert nicht unter IE7.

    Geändert 

    left:auto;
right:auto;

    Angefangen zu arbeiten, aber in den übrigen Browsern wird es aufhören zu arbeiten!
    So verwendet dieser Weg für IE7 unter

    if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
    • Tun Sie etwas dagegen, der Bearbeitung Ihrer Antwort auf die gesamte Lösung?
    • Das wird nicht funktionieren, ohne ein auto-margin auf der linken und rechten Seiten.
    InformationsquelleAutor jatinder
  8. 2

    Grundsätzlich können Sie wickeln Sie es in ein anderes div und seine position zu fixed.

    CSS:

    .bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}

    HTML:

    <div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

    InformationsquelleAutor Abdulla Dlshad
  9. 1

    To fix the position verwenden :-

    div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
    InformationsquelleAutor HeadAndTail
  10. 1

    Ich verwendet vw (viewport width) und vh (viewport-Höhe). viewport ist dem gesamten Bildschirm. 100vw ist Ihren Bildschirmen gesamten Breite und 100vh ist insgesamt der Höhe. 

    .class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
    InformationsquelleAutor Aseem
  11. 0

    Eine mögliche Antwort:

    <!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
    • Dies scheint zu funktionieren, obwohl es erfordert, dass Sie bereits wissen, die Breite und Höhe des Elements.
    InformationsquelleAutor Martin Vahi
  12. 0

    Versuchen Sie es mit diesem für den horizontalen Elementen, die nicht center richtig.

    width: calc (width: 100% - Breite, was anderes ist aus der Zentrierung es)

    Beispielsweise, wenn Ihre Seiten-navigation 200px:

    width: calc(100% - 200px);
    InformationsquelleAutor Robert Ross
  13. 0
    #modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

    innen es kann jedes element mit diffenet Breite, Höhe oder ohne.
    alle zentriert sind.

    InformationsquelleAutor praffessorr
  14. -11

    Die einzige sichere Lösung ist die Verwendung von table align=center, in:

    <table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

    Ich kann nicht glauben, dass Menschen auf der ganzen Welt verschwenden diese reichlich blöde Zeit zu lösen, ein so grundlegendes problem wie zentrieren einer div. css-Lösung funktioniert nicht in allen Browsern, jquery-Lösung ist ein software-rechnerische Lösung und ist nicht eine option für andere Gründe.

    Habe ich verschwendet zu viel Zeit immer wieder zu vermeiden, mit Tisch, aber aus Erfahrung sagen, mich zu stoppen, es zu bekämpfen. Benutzen Sie die Tabelle für das zentrieren von div. Arbeitet die ganze Zeit in allen Browsern! Nie sorgen mehr.

    • Dies beantwortet nicht die Frage an alle. Es gibt keine nicht-CSS-äquivalent zu position:fixed.
    InformationsquelleAutor Cheong
Schreibe einen Kommentar