Position zentrieren: festes Element

437

Ich möchte ein position: fixed;Popup-Feld mit einer dynamischen Breite und Höhe auf dem Bildschirm zentrieren. Ich habe dafür verwendet margin: 5% auto;. Ohne position: fixed;es zentriert fein horizontal, aber nicht vertikal. Nach dem Hinzufügen position: fixed;wird es sogar nicht horizontal zentriert.

Hier ist das komplette Set:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Erweitern Sie das Snippet

Wie zentriere ich dieses Feld mit CSS im Bildschirm?

css  css-position  centering 
— Saturngott
quelle

Antworten:

605

Sie müssen grundsätzlich Satz topund leftauf 50%die linke obere Ecke des div zu zentrieren. Sie müssen auch das margin-topund margin-leftauf die negative Hälfte der Höhe und Breite des Div einstellen , um die Mitte in Richtung der Mitte des Div zu verschieben.

Vorausgesetzt, ein <!DOCTYPE html>(Standardmodus), sollte dies Folgendes 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. */

Wenn Sie sich nicht für die vertikale Zentrierung und alte Browser wie IE6 / 7 interessieren, können Sie stattdessen auch left: 0und right: 0zu dem Element mit einem margin-leftund margin-rightvon hinzufügen auto, sodass das fest positionierte Element mit einer festen Breite weiß, wo es links und links ist rechte Offsets beginnen. In Ihrem 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;

Auch dies funktioniert nur in IE8 +, wenn Sie sich für IE interessieren, und dies zentriert nur horizontal, nicht vertikal.

— BalusC
quelle
8
Ich habe diesen Trick in css-tricks.com/… gefunden . Aber wenn ich die Breite und Höhe ändere, bewegt sich das Zentrum nicht. Ja, ich sollte den Rand links und oben ändern, wenn ich Höhe und Breite ändere.
— Saturngod
2
Zu Ihrer Information: Dadurch werden die Dinge korrekt in der Mitte positioniert, aber leider verlieren Sie Ihre Bildlaufleisten. Inhalte, die vom Ansichtsfenster abgeschnitten wurden, sind auch beim Scrollen nicht erreichbar, da die feste Position auf dem Ansichtsfenster basiert und nicht auf dem Seite. Bisher habe ich nur Javascript gefunden.
— Groxx
3
Groxx Ich denke, Sie könnten mithilfe der Überlaufeigenschaft Bildlaufleisten in ein Div im Popup einfügen .
— David Winiecki
1
Außerdem müssen Sie für dieses Element die Breite des Elements kennen.
— Hector Ordonez
2
Ah. nm wenn das der Fall ist, meine ich natürlich, dass die Browsergröße dynamisch sein wird, nicht sicher, warum das in der Frage war. Stattdessen dachte ich, er meinte, dass die Popup-Dimensionen dynamisch sein müssten. das ist der Fall für mich, also benutze ich transform: translate (-50%, -50%); funktioniert gut, außer nicht auf IE8.
— Nächte
323

Ich möchte ein Popup-Feld mit dynamischer Breite und Höhe auf dem Bildschirm zentrieren.

Hier ist ein moderner Ansatz zum horizontalen Zentrieren eines Elements mit einer dynamischen Breite - er funktioniert in allen modernen Browsern. Unterstützung kann hier gesehen werden .

Beispiel aktualisiert

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

Für die vertikale und horizontale Zentrierung können Sie Folgendes verwenden:

Beispiel aktualisiert

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

Möglicherweise möchten Sie auch weitere Eigenschaften mit Herstellerpräfix hinzufügen (siehe Beispiele).

— Josh Crozier
quelle
1
Ich verwende diesen Ansatz, um ein fest positioniertes Bild horizontal zu zentrieren, dessen Breite größer als die Fensterbreite ist, und das zumindest in den aktuellen Versionen von Firefox, Chrome, IE 11 und Edge einwandfrei funktioniert.
— Jelhan
1
In meinen Tests funktioniert dies sehr gut (hinter Präfixen), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome und Safari, Android 4.4+ Chrome. Einziger Fehler für mich war Android 4.0, bei dem die Übersetzung nicht erfolgte.
— Danjah
2
@ahnbizcad, dies funktioniert in Desktop-Browsern wie Chrome 61, Safari 11 und FireFox 65, aber nicht in Chrome 61 unter Android 6, die akzeptierte Antwort funktioniert in allen Browsern.
— Erik Barke
5
Dadurch verschwimmen die Bilder in Chrome.
— Tomasz P. Szynalski
1
Irgendwie funktionierte nur ein Ansatz, der mit meinem img in allen Browsern richtig funktionierte. Vielen Dank!
— Kugelfisch
136

Oder fügen Sie einfach left: 0und right: 0zu Ihrem ursprünglichen CSS hinzu, wodurch es sich ähnlich wie ein reguläres nicht festes Element verhält und die übliche Technik mit automatischem Rand 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;
}

Beachten Sie, dass Sie ein gültiges (X) HTML verwenden müssen, DOCTYPEdamit es sich im IE korrekt verhält (was Sie natürlich sowieso haben sollten ..!)

— Will Prescott
quelle
2
In welchem ​​Sinne? Das übergeordnete Element ist das Körperelement, das keine Ränder hat. Wenn Sie dem Körper Randeigenschaften hinzufügen (?!), Wäre dies sicher betroffen, ebenso wie die 50% -Technik, die ich mir vorstelle. Ich versichere Ihnen, dass es mit den angegebenen Parametern einwandfrei funktioniert, nur in jedem Browser überprüft wird, den ich zur Hand habe, und den zusätzlichen Vorteil hat, dass es nicht von der Breite des Elements abhängig ist.
— Will Prescott
5
Ich habe nur diese beiden Eigenschaften und einen Doctype zum Beispiel-HTML des OP hinzugefügt. Bei weiteren Tests scheint jedoch IE7 (oder 8 im Kompatibilitätsmodus) das Problem zu sein - es scheint, dass der Wert der rightEigenschaft nicht berücksichtigt wird, wenn er leftebenfalls festgelegt ist! ( msdn.microsoft.com/en-us/library/… stellt fest, dass leftund rightnur "teilweise" Unterstützung in IE7). OK, ich gebe zu, dass diese Lösung nicht gut ist, wenn IE7-Unterstützung wichtig ist, aber ein großartiger Trick, an den man sich für die Zukunft erinnern sollte :)
— Will Prescott
7
Dies sollte die akzeptierte Antwort sein. Ich hatte zwei feste Positionen, eine für die Deckkraftmaske und eine für das Modal. Nur so konnte ich die feste Position modal in der Mitte des Bildschirms zentrieren. Tolle Antwort, wer hätte das gedacht?
— Chris Hawkes
3
Ich stimme zu, dies sollte die akzeptierte Antwort sein. Es funktioniert auch perfekt im reaktionsschnellen Design, da es nicht von der Breite abhängig ist.
— Hector Ordonez
7
Ich würde vorschlagen, die Antwort zu vereinfachen, da ein Teil des CSS nur für das OP relevant ist. Alles was Sie brauchen ist Position: fest; links: 0; rechts: 0; Rand: 0 Auto; .
— Hector Ordonez
23

Fügen Sie einen Container hinzu wie:

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

Dann legen Sie Ihre Box in dieses div wird die Arbeit erledigen.

— Romulus Urakagi Ts'ai
quelle
"text-align: center" hat bei der Zentrierung des internen Divs nicht funktioniert.
— Nima
2
Die interne Box muss vorhanden sein, damit display: inline-blockdies funktioniert. (Einige andere Anzeigewerte könnten auch funktionieren, wie z. B. table)
— Brilliand
Ein besserer Ansatz für das oben erwähnte CSS wäre das Hinzufügen margin:auto;und Ändern der Breite zu width:50%oder width:400px. dann kann der Inhalt gerader Text, Blockelemente oder Inline-Elemente sein.
— Joshua Burns
20

Einfach hinzufügen:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— Bob
quelle
1
Dies funktioniert nicht position: fixed, worum es bei der Frage geht. Wenn ich falsch liege, bearbeiten Sie bitte Ihre Antwort, um ein ausführbares Code-Snippet einzuschließen.
— Flimm
1
es funktioniert gut mit fester Position.
— Phuhui
1
Es funktioniert mit position: fixed, vorausgesetzt das max-widthoder widthauf das Element setzen.
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Im Inneren kann sich jedes Element mit unterschiedlicher Breite, Höhe oder ohne befinden. alle sind zentriert.

— praffessorr
quelle
5

Für diese Lösung müssen Sie keine Breite und Höhe für Ihr Popup-Div definieren.

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

Und anstatt die Größe des Popups und minus die Hälfte nach oben zu berechnen, ändert Javascript die Größe des Popup-Containers, um den gesamten Bildschirm auszufüllen ...

(100% Höhe, funktioniert nicht bei Verwendung von display: table-cell; (was erforderlich ist, um etwas vertikal zu zentrieren)) ...

Wie auch immer, es funktioniert :)

— BjarkeCK
quelle
4 
left: 0;
right: 0;

Arbeitete nicht unter IE7.

Gewechselt zu 

left:auto;
right:auto;

Begann zu arbeiten, aber in den anderen Browsern funktioniert es nicht mehr! So verwendet für IE7 unten

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
— Jatinder
quelle
Haben Sie etwas dagegen, Ihre Antwort so zu bearbeiten, dass sie die gesamte Lösung enthält?
— Flimm
Dies funktioniert nicht ohne einen automatischen Rand auf der linken und rechten Seite.
— RoM4iK
2

Grundsätzlich können Sie es in eine andere wickeln divund seine gesetzt positionzu fixed.

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

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
Erweitern Sie das Snippet

— Abdulla Dlshad
quelle
2

Ich habe vw(Ansichtsfensterbreite) und vh(Ansichtsfensterhöhe) verwendet. Das Ansichtsfenster ist Ihr gesamter Bildschirm. 100vwist die Gesamtbreite Ihres Bildschirms und die 100vhGesamthöhe.

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

Um die Position zu fixieren, verwenden Sie Folgendes:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— HeadAndTail
quelle
3
Bitte erläutern Sie, warum Ihre Lösung für die gestellte Frage funktioniert.
— Shekhar Chikara
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>
— Martin Vahi
quelle
Dies scheint zu funktionieren, obwohl Sie die Breite und Höhe des Elements bereits kennen müssen.
— Flimm
0

Versuchen Sie dies für horizontale Elemente, die nicht richtig zentriert werden.

width: calc (width: 100% - width was auch immer sonst nicht zentriert ist )

Zum Beispiel, wenn Ihre seitliche Navigationsleiste 200px ist:

width: calc(100% - 200px);
— Robert Ross
quelle
0

Ich benutze einfach so etwas:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Das Dialogfeld wird für mich sowohl horizontal als auch vertikal zentriert, und ich kann unterschiedliche Breite und Höhe verwenden, um unterschiedliche Bildschirmauflösungen anzupassen, damit es bei Medienabfragen reagiert.

Keine Option, wenn Sie weiterhin Unterstützung für Browser bereitstellen müssen, in denen benutzerdefinierte CSS-Eigenschaften vorhanden sind oder calc()die nicht unterstützt werden (überprüfen Sie caniuse).

— Fabien Snauwaert
quelle
0

Dieser hat am besten für mich funktioniert:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
quelle
-13

Die einzige narrensichere Lösung ist die Verwendung von table align = center wie in:

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

Ich kann nicht glauben, dass Menschen auf der ganzen Welt diese Menge an alberner Zeit verschwenden, um ein so grundlegendes Problem wie die Zentrierung eines Div zu lösen. Die CSS-Lösung funktioniert nicht für alle Browser. Die jquery-Lösung ist eine Software-Berechnungslösung und aus anderen Gründen keine Option.

Ich habe wiederholt zu viel Zeit verschwendet, um die Verwendung von Tischen zu vermeiden, aber die Erfahrung sagt mir, dass ich aufhören soll, dagegen anzukämpfen. Verwenden Sie die Tabelle zum Zentrieren von div. Funktioniert ständig in allen Browsern! Mach dir keine Sorgen mehr.

— Cheong
quelle
11
Dies beantwortet die Frage überhaupt nicht. Es gibt kein Nicht-CSS-Äquivalent zu position:fixed.
— Brilliand
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.