Div fisso centrale con larghezza dinamica (CSS)


90

Ho un div che avrà questo CSS:

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

Ora, come posso rendere questo div centrato? Posso usare margin-left: -450px; left: 50%;ma funzionerà solo quando lo schermo è> 900 pixel. Dopodiché (quando la finestra è <900 pixel), non sarà più centrata.

Ovviamente posso farlo con una sorta di js, ma esiste un modo "più corretto" di farlo con i CSS?


4
@ Liam - Non sono d'accordo, penso che questa domanda sia di per sé un diritto. Quelle domande non rispondono a questa riguardo al fatto di avere un div senza larghezza fissa centrato.
Joshua M,

Quello che ha detto Joshua, è per centrare un div in un altro.
gubbfett

7
@Liam - Oltre a ciò, non puoi usare a margin: 0 autosu un position: fixeddiv. Hai letto la domanda?
Joshua M,

^ no. ho provato anche quello. : p
gubbfett

3
@JoshuaM La tua affermazione non è corretta al 100%. Vedi la mia risposta.
laconbass

Risposte:


226

È possibile centrare una fixedo absoluteun'impostazione elemento posizionato righte leftper 0, e poi margin-lefte margin-rightper autocome se si stesse Centrare un staticelemento posizionato.

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

Guarda questo esempio lavorando su questo violino .


1
Solo per menzionare ... Non è così inaspettato, ma fallisce in IE7. È posizionato a 0px da sinistra qui. Come mai funziona perfettamente in IE 8.
gubbfett

Questo non funziona quando la larghezza dell'elemento è maggiore della larghezza dello schermo .. sarebbe bello farlo funzionare in quella situazione.
andrewb

1
@andrewb potresti applicare un margine altrettanto negativo sia su rightche leftdi almeno a value >= witdth / 2, come visto su jsfiddle.net/PvfFy/168 , ma non è un approccio elegante IMHO. L'ho provato su chrome per divertimento, non so se funzionerà sul resto
laconbass

5
Al di fuori dell'ambito della domanda, ciò dipende dall'impostazione della larghezza dell'elemento, quindi non è eccezionale se si dispone di contenuto dinamico la cui larghezza è variabile o sconosciuta. Lasciando da parte il centraggio, normalmente lo farei con il display: blocco in linea e nessuna larghezza impostata. Qualcuno ha una soluzione no-js per quel caso?
enigment

4
La domanda dice larghezza dinamica , questo è l'intero problema, non puoi semplicemente ignorarlo.
Gil Epshtain,

56

Ecco un altro metodo se puoi utilizzare in sicurezza la transformproprietà di CSS3 :

.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%);
}

... o se vuoi centrare sia orizzontale che verticale:

.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%);
}

5
Finché è per un browser moderno, questa è la soluzione MIGLIORE su questa risposta! L'unico che è come un vero "galleggiante: centro", in quanto puoi fare clic intorno all'elemento di avvolgimento e non rimanere bloccato dovendo pescare intorno ad esso. Amo questa risposta!
SpYk3HH

1
Attenzione, non usare la traduzione in percentuale per centrare il testo poiché verrà smussato se il valore risultante è un float. Oh ragazzo, non lo vuoi, no non lo vuoi.
gnou

L'utilizzo delle trasformazioni CSS può causare lo smussamento su qualcosa di più del semplice testo; Sto ottenendo confini funky come risultato della trasformazione.
Nathan K

1
Potenziale contrarsi in anticipo quando si cambiano le dimensioni dello schermo (a seconda delle dimensioni della divisione), con conseguente grandi confini attorno al bordo della divisione.
Entità Unica

7
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Avresti bisogno di avvolgerlo in un contenitore. ecco il 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;  
}

Ah, mi piace il tuo pensiero. Il div fisso sarà solo un contenitore per un altro div con il risultato effettivo? Proverò questo!
gubbfett

Anche se mi piace l'intuitività della tua risposta, non vedo come consentirebbe il supporto di ie6 / 7.
Mathew Berg

1
@ MathewBerg, buon punto su ie6 / 7. In tal caso la tua risposta dovrebbe funzionare meglio. Questo è un po 'OT, ma personalmente penso che gli sviluppatori non dovrebbero perdere tempo a sistemare cose per <= ie7. Penso che in realtà gli sviluppatori dovrebbero bloccare quei browser per forzare l'aggiornamento di persone e aziende con vecchi sistemi. È quanto mai difficile vendere quell'idea a un cliente pagante! ;)
gubbfett

Sì, ma sfortunatamente alcune aziende richiedono il supporto per i browser legacy, non importa quanto lontano arriveremo nel futuro. Vai avanti e accetta la mia risposta o la risposta di laconbass a seconda delle tue esigenze.
Mathew Berg

1
anche questo non funziona in quanto non è ancora possibile fare clic su "contenitore"
SpYk3HH

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.