Feste Mitte mit dynamischer Breite (CSS) zentrieren

87

Ich habe eine Div, die dieses CSS haben wird:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Wie kann ich dieses Div zentrieren? Ich kann verwenden, margin-left: -450px; left: 50%;aber dies funktioniert nur, wenn der Bildschirm> 900 Pixel ist. Danach (wenn das Fenster <900 Pixel ist) wird es nicht mehr zentriert.

Ich kann das natürlich mit einer Art js machen, aber gibt es eine "korrektere" Möglichkeit, dies mit CSS zu tun?

css html center gubbfett
quelle
4
@ Liam - Ich bin anderer Meinung, ich denke, diese Frage ist eine Selbstverständlichkeit. Diese Fragen beantworten diese Frage nicht, wenn ein Div ohne feste Breite zentriert ist.
Joshua M
Was Joshua gesagt hat, ist, um ein Div in einem anderen zu zentrieren.
Gubbfett
7
@Liam - Außerdem kannst du a nicht margin: 0 autofür ein position: fixedDiv verwenden. Hast du die Frage überhaupt gelesen?
Joshua M
^ nein. Das habe ich auch versucht. : p
gubbfett
3
@JoshuaM Deine Behauptung ist nicht 100% richtig. Siehe meine Antwort.
Laconbass

Antworten:

215

Sie können eine fixedoder absolutepositionierte Elementeinstellung rightund leftbis 0und dann margin-left& margin-rightbis autozentrieren , als ob Sie ein staticpositioniertes Element zentrieren würden .

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Sehen Sie sich dieses Beispiel an, das an dieser Geige arbeitet .

Laconbass
quelle
1
Nur um zu erwähnen ... Es ist nicht so unerwartet, aber es schlägt in IE7 fehl. Es ist 0px von links hier positioniert. Es funktioniert jedoch perfekt in IE 8.
Gubbfett
Dies funktioniert nicht, wenn die Breite des Elements größer als die Breite des Bildschirms ist. Es wäre schön, wenn es in dieser Situation funktioniert.
Andrew
1
@andrewb Sie könnten einen gleich negativen Rand sowohl auf rightals auch leftauf mindestens a anwenden , value >= witdth / 2wie auf jsfiddle.net/PvfFy/168 zu sehen , aber meiner Meinung nach ist dies kein eleganter Ansatz. Ich habe es zum Spaß auf Chrom getestet, ich weiß nicht, ob es auf dem Rest
funktioniert
5
Außerhalb des Rahmens der Frage hängt dies von der Einstellung der Elementbreite ab. Daher ist es nicht gut, wenn Sie dynamischen Inhalt haben, dessen Breite variiert oder unbekannt ist. Wenn ich die Zentrierung beiseite lasse, mache ich das normalerweise mit display: inline-block und ohne festgelegte Breite. Hat jemand eine No-JS-Lösung für diesen Fall?
Enigment
3
Die Frage sagt dynamische Breite , das ist das ganze Problem, das kann man nicht einfach ignorieren.
Gil Epshtain
52

Hier ist eine andere Methode, wenn Sie die transformEigenschaft von CSS3 sicher verwenden können :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... oder wenn Sie sowohl horizontale als auch vertikale Zentrierung wünschen:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
Alan Bellows
quelle
5
Solange es sich um einen modernen Browser handelt, ist dies die BESTE Lösung für diese Antwort! Das einzige, das wie ein echtes "float: center" ist, in dem Sie um das Wickelelement klicken können und nicht daran gehindert werden müssen, um es herum zu fischen. Ich liebe diese Antwort!
SpYk3HH
1
Vorsicht, verwenden Sie keine prozentuale Übersetzung, um Text zu zentrieren, da dieser geglättet wird, wenn der resultierende Wert ein Float ist. Ho Junge, das willst du nicht, nein, das tust du nicht.
Gnou
Die Verwendung von CSS-Transformationen kann dazu führen, dass mehr als nur Text geglättet wird. Durch die Transformation bekomme ich funky Grenzen.
Nathan K
1
Möglicherweise kann es beim Ändern der Bildschirmgröße (abhängig von der Größe der Abteilung) zu einer frühzeitigen Kontraktion kommen, was zu großen Grenzen am Rand der Abteilung führt.
Einzel Entity
7 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Sie müssten es in einen Behälter wickeln. Hier ist die CSS

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
Mathew Berg
quelle
Ah, ich mag dein Denken. Das feste Div ist nur ein Container für ein anderes Div mit dem tatsächlichen Ergebnis? Ich werde es versuchen!
Gubbfett
Obwohl mir die Intuitivität Ihrer Antwort gefällt, sehe ich nicht, wie sie die Unterstützung von ie6 / 7 ermöglichen würde.
Mathew Berg
1
@ MathewBerg, guter Punkt über ie6 / 7. In diesem Fall sollte Ihre Antwort am besten funktionieren. Dies ist ein kleines OT, aber ich persönlich denke, Entwickler sollten keine Zeit damit verbringen, Dinge für <= ie7 zu reparieren. Ich denke, Entwickler sollten diese Browser blockieren, um Menschen und Unternehmen mit alten Systemen zum Upgrade zu zwingen. Es ist jedoch schwierig, diese Idee an einen zahlenden Kunden zu verkaufen! ;)
Gubbfett
Ja, aber leider benötigen einige Unternehmen Unterstützung für ältere Browser, egal wie weit wir in die Zukunft kommen. Akzeptieren Sie je nach Bedarf entweder meine oder die Antwort von Laconbass.
Mathew Berg
1
Dies funktioniert auch nicht, da Sie immer noch nicht durch "Container" klicken können
SpYk3HH