Ich muss ein div
(mit position:absolute;
) Element in der Mitte meines Fensters platzieren. Aber ich habe Probleme damit, weil die Breite unbekannt ist .
Ich habe es versucht. Es muss jedoch angepasst werden, da die Breite reagiert.
.center {
left: 50%;
bottom:5px;
}
Irgendwelche Ideen?
Antworten:
quelle
position: fixed
aber wenn die Höhe der Überlagerung unbekannt ist, müssen Bildlaufleisten für die Überlagerung implementiert werden<html>
. Da das<html>
Element jedoch keineheight
Angabe hat, nimmt es die Höhe des gesamten Inhalts im Dokument an. Dies ist nichts, da der einzige Inhalt absolut positioniert ist (aus dem Inhaltsfluss herausgenommen). Das Hinzufügenheight: 100%
zum<html>
Element macht einen Unterschied.Das funktioniert bei mir:
quelle
width
sollte auf einen bestimmten Wert eingestellt werden, damit dies funktioniert.auto
und100%
zentriert das Element nicht.display: block;
ist ein Muss.position: absolute;
ist kein Muss. Alle Werte funktionieren. Übergeordnete Elementeposition
sollten auf etwas anderes als gesetzt werdenstatic
. Einstellenleft
undright
zu0
ist nicht erforderlich.margin-left: auto; margin-right: auto;
wird die Arbeit machen.Reaktionsschnelle Lösung
Hier ist eine gute Lösung für responsives Design oder unbekannte Dimensionen im Allgemeinen, wenn Sie IE8 und niedriger nicht unterstützen müssen.
Code-Snippet anzeigen
Hier ist eine JS-Geige
Der Hinweis ist, dass
left: 50%
relativ zum Elternteil ist, während dietranslate
Element Transformation relativ zur Breite / Höhe der Elemente ist.Auf diese Weise haben Sie ein perfekt zentriertes Element mit einer flexiblen Breite für Kind und Eltern. Bonus: Dies funktioniert auch, wenn das Kind größer als das Elternteil ist.
Sie können es damit auch vertikal zentrieren (und auch hier können Breite und Höhe von Eltern und Kind völlig flexibel (und / oder unbekannt) sein):
Beachten Sie, dass möglicherweise auch ein
transform
Herstellerpräfix erforderlich ist . Zum Beispiel-webkit-transform: translate(-50%,-50%);
quelle
webkit-
Präfix, wie ich vorgeschlagen habe.transform: translate
scheintposition: fixed
bei Kindern unbrauchbar zu machen . Die akzeptierte Antwort funktioniert in diesem Fall besser.Wirklich schöner Beitrag. Ich wollte nur hinzufügen, wenn jemand es mit einem einzelnen Div-Tag machen möchte, dann hier der Ausweg:
Nehmen
width
als900px
.In diesem Fall sollte man das
width
vorher wissen .quelle
"because the width is unknown"
... das beantwortet die Frage nichtAbsolutes Zentrum
HTML:
CSS:
Demo: http://jsbin.com/rexuk/2/
Getestet in Google Chrome, Firefox und IE8
Hoffe das hilft :)
quelle
diese Arbeit für vertikale und horizontale
Wenn Sie das Element zum Mittelpunkt des übergeordneten Elements machen möchten, legen Sie die Position des übergeordneten Verwandten fest
bearbeiten:
Richten Sie für die vertikale Mitte die eingestellte Höhe an Ihrem Element aus. danke an @Raul
Wenn Sie das Element zum Mittelpunkt des übergeordneten Elements machen möchten, setzen Sie die Position des übergeordneten Elements auf relativ
quelle
Auf der Suche nach einer Lösung habe ich oben Antworten erhalten und konnte Inhalte mit Matthias Weilers Antwort zentrieren, aber mit Textausrichtung.
Arbeitete mit Chrom und Firefox.
quelle
Wenn Sie auch horizontal und vertikal zentrieren müssen:
quelle
** ANTWORTLÖSUNG **
Angenommen, das Element in der Div ist eine andere Div ...
Diese Lösung funktioniert gut
Der Behälter kann eine beliebige Größe haben (muss relativ zur Position sein).
Das Element ( div ) kann auch eine beliebige Größe haben (muss kleiner als der Container sein )
Das Ergebnis wird so aussehen. Führen Sie das Code-Snippet aus
Ich fand es sehr hilfreich
quelle
Dies ist eine Mischung aus anderen Antworten, die für uns funktioniert haben:
quelle
Ich verstehe, dass diese Frage bereits einige Antworten hat, aber ich habe nie eine Lösung gefunden, die in fast allen Klassen funktioniert, die auch sinnvoll und elegant ist. Hier ist meine Einstellung, nachdem ich ein paar Änderungen vorgenommen habe:
Das heißt, gib mir ein
top: 50%
und einleft: 50%
, dann transformiere (schaffe Raum) auf beiden X / Y-Achsen in die-50%
Wert, in gewissem Sinne "einen Spiegelraum schaffen".Als solches schafft dies einen gleichen Raum auf allen 4 Punkten eines Div, der immer eine Box ist (hat 4 Seiten).
Dieser Wille:
quelle
translate(-50%,-50%);
?Funktioniert mit jeder zufälligen unbekannten Breite des absolut positionierten Elements, das Sie in der Mitte Ihres Containerelements haben möchten.
Demo
quelle
Flex kann verwendet werden, um absolut positionierte Div zu zentrieren.
Code-Snippet anzeigen
quelle
display: -webkit-flex;
?Soweit ich weiß, ist dies bei unbekannter Breite nicht möglich.
Sie könnten - wenn dies in Ihrem Szenario funktioniert - ein unsichtbares Element mit 100% Breite und Höhe absolut positionieren und das Element dort mit dem Rand zentrieren lassen: automatisch und möglicherweise vertikal ausrichten. Andernfalls benötigen Sie dazu Javascript.
quelle
Ich möchte die Antwort von @ bobince ergänzen:
Verbessert: /// Dadurch wird die horizontale Bildlaufleiste nicht mit großen Elementen im zentrierten Div angezeigt.
quelle
Hier ist ein nützliches jQuery-Plugin, um dies zu tun. Gefunden hier . Ich denke nicht, dass es nur mit CSS möglich ist
quelle
Sass / Kompass-Version von Responsive Solution oben:
quelle
transform: translate(-50%, -50%)
macht Text und alle anderen Inhalte unter OS X mithilfe von Webkit-Browsern verschwommen. keithclark.co.uk/articles/gpu-text-rendering-in-webkit-webkit-font-smoothing: antialiased;
Ich habe das aus dem Artikel entnommen, den Sie übrigens gepostet haben!Meine bevorzugte Zentriermethode:
JSFiddle hier
quelle
Das hat bei mir funktioniert:
quelle
Ich weiß, dass ich bereits eine Antwort gegeben habe, und meine vorherige Antwort funktioniert zusammen mit anderen Antworten einwandfrei. Aber ich habe dies in der Vergangenheit verwendet und es funktioniert besser in bestimmten Browsern und in bestimmten Situationen. Also dachte ich, ich würde auch diese Antwort geben. Ich habe meine vorherige Antwort nicht "bearbeitet" und hinzugefügt, da ich der Meinung bin, dass dies eine völlig separate Antwort ist und die beiden von mir angegebenen Antworten nicht miteinander verbunden sind.
HTML:
CSS:
quelle
quelle
HTML
CSS
http://jsfiddle.net/f51rptfy/
quelle
Diese Lösung funktioniert, wenn das Element
width
und hatheight
quelle
Die Lösung dieser Frage hat in meinem Fall nicht funktioniert. Ich mache eine Beschriftung für einige Bilder und habe sie damit gelöst
quelle
HTML:
CSS:
Dies und weitere Beispiele hier
quelle
Dies ist ein Trick, den ich herausgefunden habe, damit ein DIV genau in der Mitte einer Seite schwebt. Wirklich hässlich natürlich, funktioniert aber in allen
Punkte und Striche
Reiniger
Wow, dass fünf Jahre vergangen sind, nicht wahr?
quelle
quelle
Sie können das Bild in ein Div einfügen und eine Div-ID hinzufügen. Das CSS für dieses Div hat eine
text-align:center
HTML:
CSS:
quelle
quelle
Ein einfacher Ansatz, mit dem ich einen Block unbekannter Breite horizontal zentrieren konnte:
Dem Regelsatz #block kann eine Eigenschaft zum Ausrichten von Text hinzugefügt werden, um dessen Inhalt unabhängig von der Ausrichtung des Blocks auszurichten.
Dies funktionierte auf neueren Versionen von Firefox, Chrome, IE, Edge und Safari.
quelle