.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}Negative Ränder sind genau halb so hoch und breit, was das Element wieder perfekt zentriert. Funktioniert nur mit Elementen mit fester Höhe/Breite.
Das funktioniert nicht in IE…
Funktioniert bei mir in IE 8.
Wenn das nicht funktioniert, versuchen Sie, JavaScript zu verwenden, um stattdessen top und left zu setzen… ;)
Ich würde dafür display:inline-block verwenden. Funktioniert viel besser (dynamische vertikale und horizontale Abmessungen für Container und Inhalt).
Was mache ich also mit dem HTML?
Ernsthaft, ich habe gelacht. Erstellen Sie eine Div mit der Klasse center.
Versuchen Sie nicht, diese Person dumm fühlen zu lassen. Es ist eine vernünftige Frage. Als ich CSS lernte, hat es mich immer verwirrt, wenn die HTML nicht aufgelistet war.
Ausgezeichnet, vielen Dank. Keine Probleme hier… funktioniert gut in IE, FF usw.
Ugh! Ich habe wirklich Schwierigkeiten, ein Popup-Div auf Mobilgeräten vertikal zu zentrieren. Wenn ich halb auf dem Bildschirm nach unten gescrollt habe und auf den Link-Button klicke, erscheint das Popup oben, wo ich es nicht sehen kann. Irgendwelche Vorschläge?
Ich nehme an, Sie haben Ihre Antwort bereits gefunden :)
Aber für die anderen neuen Jungs wie mich müssen Sie „position: absolute“ in „position: fixed“ ändern.
Cool! Das ist genau das, wonach ich gesucht habe (ich lüge nicht)!
Dasselbe hier, Kumpel
Ich benutze das, aber… sagen wir, Sie verkleinern Ihr Fenster auf etwa 100px Breite. Dann beginnt der Inhalt an der linken Seite abgeschnitten zu werden und Sie können nicht dorthin scrollen. Gibt es dafür eine Lösung?
Sehr schöne Lösung. Das hat mir geholfen, ein „Lade“-Bild innerhalb eines Containers mit flüssiger Breite zu zentrieren. Hat einwandfrei funktioniert.
Das funktioniert nicht auf iOS, aber für alle Browser gut für mich… warum?!?
Also musste ich eine Aufgabe in etwa 20 Minuten erledigen. Es war schrecklich, es gab Feuer und Schwefel und Kreaturen, die selbst die lebhaftesten Vorstellungen niemals in ihren schlimmsten Albträumen hätten erahnen können. Überall lagen CSS-Teile herum, das HTML sah schrecklich aus, aber ich suchte weiter nach einem Weg, einem Weg, dies zu beheben und es mit der Kraft der Gerechtigkeit und der Schönheit der himmlischen Heerscharen leuchten zu lassen.
Dann fand ich das, und in einem einzigen Moment, in dem man kaum Zeit zum Blinzeln hatte, war alles behoben, und oh, wie es behoben war. Es war ein Wunder zu sehen. Man musste eine Träne vergießen, wie schön es aussah, das Feuer legte sich, der Schwefel verwandelte sich in die kleinen Elefanten, die man immer am Rande seines Blickfeldes tanzen sehen kann, und das Gleichgewicht war wiederhergestellt. Alles war in Ordnung in der Welt, dank dieses Beitrags.
Vielen Dank.
Du hast mir den Tag gerettet, Bob. DANKE.
Vielen Dank, Chris – es funktioniert wunderbar – das Einzige ist, wie MarcusLAND sagte, es funktioniert nicht auf dem iPhone (was in meinem Geschäft leider so ist, wie viele Leute meine Arbeit überprüfen) – es schneidet bei mir oben ab.
Gibt es eine Lösung?
Sie könnten Media Queries verwenden, um die Bildschirmbreite zu erkennen und den Zentrierungs-Trick nur anzuwenden, wenn der Bildschirm kleiner als die Höhe ist, und für die vertikale Zentrierung „margin: 0 auto;“ verwenden.
Hoppla, ich meinte höher als der Inhalt O.o
Danke!
Sie können es versuchen mit display:inline-block…
Ich habe auch Schwierigkeiten damit…
Wenn ich mehrere Bilder mit unterschiedlichen Proportionen habe?
Außerdem hat eine meiner Dateien Text, der sich links vom Bild befinden würde, und teilt somit den verbleibenden Raum – vom Ende des Textes – zum rechten Rand.
funktioniert super, um das Div zu zentrieren, aber ich kann keine Mindestbreite zum Laufen bringen. Irgendwelche Vorschläge? Danke!
Sie können
min-width: 200px;verwenden, damit das<div>nicht unter200pxBreite fällt.Ich kann Ihnen nicht sagen, wie oft Chris mir Stunden gespart und meinen Ruf bei meinen Kunden mit seinen großartigen Tipps und Beiträgen verbessert hat. Dies ist ein weiterer Trick, den ich jedes Mal wieder lernen muss, wenn er auftaucht. Ich glaube, dieser Beitrag hat es endlich für mich gelöst!
Es funktioniert in IE 9, hat aber Probleme in Safari.
Chris,
Die Implementierung ist wirklich nicht offensichtlich. Ich denke, Sie sollten ein vollständigeres Beispiel zeigen.
Welches CSS und HTML gehört zum img-Tag?
Welches CSS und HTML gehört zum enthaltenden Element?
Auf diese Weise können die Leute damit experimentieren und es schneller auf ihren Fall anwenden.
Ron
.content
{
width: 600px;
height: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -100px;
;
}
Behebung des Problems, dass der Inhalt ohne Scrollmöglichkeit verschwindet
.content {width: 600px;height: 400px}
@media only screen and (min-height: 400px) { /die Höhe Ihres Divs/
.content{position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px}
}
@media only screen and (max-height: 399px) {
.content {margin-top:10px;margin-bottom:10px} /Sie können hier tun, was Sie wollen, dies fügt nur oben und unten Platz hinzu, damit es so aussieht, als würde es immer noch in der Mitte schweben, aber es wird gescrollt/
}
und offensichtlich brauchen Sie das, um es vertikal in der Mitte zu halten
{padding:0; margin: 0 auto}
Kann mir jemand die CSS- oder JS-Effekte für den Hover-Effekt der footer-Linie auf css-tricks.com zeigen? Wie geschieht das?
Nur CSS, es ist ein Span, der einen horizontalen Gradienten im Hintergrund hat + background-position beim Hover ändert.
Diese Methode eignet sich hervorragend für Lightbox-Popups mit JS.
Ich finde es irgendwie lustig, dass es vor 15 Jahren mit Tabellen extrem einfach war, dies zu tun, und jetzt können wir es nicht mehr „korrekt“ ohne Hacks. Wenn Sie mit einem Div mit variabler Höhe zu tun haben, in dem Sie ein Objekt vertikal zentrieren möchten, haben Sie ebenfalls zusätzlichen „Spaß“.
Danke!! Ich habe versucht, das für ein Logo am oberen Rand einer Seite herauszufinden (ein
<
div class="logo"> innerhalb eines
<
div class="header">). Ich musste es ein wenig anpassen, indem ich es entweder in „position: relative;“ anstelle von „position: absolute;“ geändert habe oder das Positionsmerkmal ganz entfernt habe, aber es hat funktioniert!! Ich werde diesen netten Trick auf jeden Fall behalten und weitergeben.
Entschuldigung, vergessen Sie es… das Entfernen der Positionseigenschaft hat nicht funktioniert (ich habe vergessen, die CSS-Stylesheet zu speichern, bevor ich aktualisiert habe… dummer Fehler), aber es „relativ“ zu machen funktioniert immer noch!
Das ist etwas falsch. Es wird nicht unter allen Bedingungen funktionieren.
Um ein Inline-Block-Element absolut vertikal und horizontal zu zentrieren, verwenden Sie Folgendes.
Ja, das ist eine bessere Lösung.
Danke Chris! Ich hatte schon eine Weile gesucht, als ich das fand, und es funktionierte!
Der einfache Weg ist, wenn Sie das Eltern-Element position: relative machen und das Kind-Element position: absolute, dann können Sie einfach
top,right,bottom,left = 0; und margin: auto;setzen.Veröffentlicht im Jahr 2009, aber immer noch hilfreich. Danke!
Dies ist ein ausgezeichnetes Beispiel dafür, warum HTML + CSS + JavaScript + serverseitiger Code eine lächerliche Krücke ist. Dieses verrückte Paradigma hätte schon vor langer Zeit „repariert“ werden können. Aber stattdessen mussten Microsoft und Netscape Krieg führen. Es war seitdem ein Cluster-Ferk. Alle Skript-Kiddies verschwenden etwa 95 % ihrer Zeit damit, die grundlegendsten Probleme zu lösen, anstatt Webanwendungen zu schreiben, die tatsächlich etwas Nützliches tun. Es hätte eine einzige, einheitliche Sprache für das Server-/Browser-Paradigma geben sollen. Was wir jetzt haben, ist reine Wahnsinn.
Nach STUNDEN des Ausprobierens vieler Dinge und des Scheiterns, Ergebnisse in IE und FF zu sehen (Chrome war OK), war ich völlig baff… Ich meine, Chris' Methode sollte die einzige Methode sein, die in allen Browsern funktioniert!
Es stellte sich heraus, dass ich Folgendes ganz oben in der Datei style.css übersehen hatte
html {height: 100%;}
Ich fühle mich ziemlich dumm =/
Lol… Ernsthaft?
Das ist kein Trick… Das ist blanko. Natürlich wird die Positionierung auf 50 % oben/links und dann negative Ränder der halben Dimensionen des Divs es zentriert =))
Aber niemand hat heutzutage ein festes Div.
Dies zu lehren ist, als würde man jemandem beibringen, mit einem Löffel zu essen… Entweder sind sie 3-4 Jahre alt oder beeinträchtigt.
Hier ist es
HTML
CSS
Dies ist ein Bild, das sowohl vertikal als auch horizontal perfekt zentriert ist. Natürlich kann man auch ein Div haben (sagen Sie ihm einfach, dass es display: inline-block; sein soll)
Und das .container muss nicht fixiert sein oder eine Höhe/Breite haben (aber ohne festgelegte Höhe ist es gleich der Höhe seines Inhalts, so dass Sie keine vertikale Ausrichtung bemerken können). Ich bin nur an einen Container mit fester Position gewöhnt, weil ich diesen Code hauptsächlich verwende, um ein Bild auf dem gesamten Viewport zu zentrieren, über allem anderen, wie in einer Galerie… für Bilder füge ich die Möglichkeit des „Maximierens“ hinzu.
Eigentlich wäre eine bessere Implementierung so
.center {
position: absolute;
display: block;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
natürlich nicht vergessen, es mit Vendor-Präfixen zu versehen!!!
.links {
position: absolute;
margin-left: 120px;
margin-top: -130px;
}
<
div class="links" >Funktioniert bei mir gut in der Mitte des Divs </div
Schön – dieser Code funktioniert gut, vielen Dank.
Was ist mit diesem??
ODER dieses für moderne Browser
Ich habe vier Wege des ‚Genau zentrierten H&V-Positions‘ ausprobiert.
1. Mit Flex, align-items im Container.
2. Das Element muss margin:auto haben.
html, body{
height: 100%;
}
.wrapper{
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
.center{
width:100px;
height: 100px;
background-color: aquamarine;
margin: auto;
}
.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
}
Es ist wirklich hilfreich, Sir… danke.
Ich liebe dich. Das hat mein ganzes Leben gerettet. Mögen die Segnungen des Himmels für immer auf dir ruhen.