Centrare una posizione: elemento fisso

439

Vorrei creare una position: fixed;finestra popup centrata sullo schermo con una larghezza e un'altezza dinamiche. L'ho usato margin: 5% auto;per questo. Senza di position: fixed;essa centra bene in orizzontale, ma non in verticale. Dopo l'aggiunta position: fixed;, non si centra nemmeno in senso orizzontale.

Ecco il set completo:

.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>

Espandi frammento

Come posso centrare questa casella sullo schermo con CSS?

css css-position centering

— saturngod
fonte

606

Che, fondamentalmente, necessario impostare tope leftper 50%centrare l'angolo superiore sinistro del div. È inoltre necessario impostare l' margin-tope margin-leftalla metà negativa di altezza e la larghezza del div di spostare il centro verso la metà del div.

Pertanto, fornito un <!DOCTYPE html>(modalità standard), ciò dovrebbe fare:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Oppure, se non ti interessa centrare verticalmente e vecchi browser come IE6 / 7, puoi invece anche aggiungere left: 0e right: 0all'elemento che ha un margin-lefte margin-rightdi auto, in modo che l'elemento fisso posizionato con una larghezza fissa sappia dove si trova a sinistra e iniziano gli offset giusti. Nel tuo caso quindi:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Ancora una volta, questo funziona solo in IE8 + se ti interessa IE, e questo si concentra solo in orizzontale e non in verticale.

— BalusC
fonte

8

Ho trovato quel trucco in css-tricks.com/… . Ma quando cambio larghezza e altezza, non si sposta al centro. Ya, dovrei cambiare il margine sinistro e superiore quando cambio altezza e larghezza.

— Saturngod,

2

Cordiali saluti: questo posizionerà correttamente le cose nel mezzo, ma sfortunatamente perderai le barre di scorrimento - qualsiasi contenuto troncato dal viewport non sarà raggiungibile, anche se scorri, perché la posizione fissa si basa sul viewport, non sul pagina. Finora, l'unica soluzione che ho trovato è con JavaScript.

— Groxx

3

Groxx Penso che potresti mettere le barre di scorrimento all'interno di un div nel pop-up usando la proprietà overflow .

— David Winiecki,

1

Inoltre, per questo è necessario conoscere la larghezza dell'elemento.

— Hector Ordonez,

2

ah. nm se è così, intendo ovviamente le dimensioni del browser saranno dinamiche, non sono sicuro del perché fosse nella domanda. invece pensavo che intendesse dire che le dimensioni del popup dovevano essere dinamiche. questo è il caso per me, quindi sto usando transform: translate (-50%, -50%); funziona benissimo tranne che su IE8.

— notti

324

Voglio creare una finestra popup centrata sullo schermo con larghezza e altezza dinamiche.

Ecco un approccio moderno per centrare orizzontalmente un elemento con una larghezza dinamica - funziona in tutti i browser moderni; il supporto può essere visto qui .

Esempio aggiornato

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

Per la centratura sia verticale che orizzontale è possibile utilizzare quanto segue:

Esempio aggiornato

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

Potresti voler aggiungere anche altre proprietà con prefisso del fornitore (vedi gli esempi).

— Josh Crozier
fonte

1

Sto usando questo approccio per centrare orizzontalmente un'immagine posizionata fissa la cui larghezza è maggiore della larghezza della finestra e funziona bene almeno nelle attuali versioni di Firefox, Chrome, IE 11 e Edge.

— jelhan,

1

Nei miei test questo funziona molto bene (dietro i prefissi), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome. L'unico fallimento per me è stato Android 4.0 in cui la traduzione non è avvenuta.

— danja

2

@ahnbizcad, funziona con browser desktop come Chrome 61, Safari 11 e FireFox 65, ma non con Chrome 61 su Android 6, la risposta accettata funziona in tutti i browser.

— Erik Barke,

5

Questo rende le immagini sfocate in Chrome.

— Tomasz P. Szynalski,

1

In qualche modo solo il mio approccio img ha funzionato correttamente su tutti i browser. Grazie mille!

— Kugelfisch,

136

O semplicemente aggiungi left: 0e right: 0al tuo CSS originale, il che lo fa comportare in modo simile a un normale elemento non fisso e la solita tecnica di auto-margin funziona:

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

Nota che devi usare un codice HTML (X) valido DOCTYPEaffinché si comporti correttamente in IE (che dovresti ovviamente avere ..!)

— Will Prescott
fonte

2

In che senso? L'elemento genitore è l'elemento body, che non ha bordi. Se hai aggiunto le proprietà del bordo al corpo (?!), Sicuramente ne risentirebbe, così come la tecnica del 50% che immagino. Ti assicuro che funziona perfettamente con i parametri indicati, appena verificato in ogni browser che ho a portata di mano, e ha l'ulteriore vantaggio di non dipendere dalla larghezza dell'elemento.

— Will Prescott il

5

Tutto quello che ho fatto è stato aggiungere quelle 2 proprietà e un doctype all'HTML di esempio dell'OP. Tuttavia su ulteriori test sembra che IE7 (o 8 in modalità compatibilità) sia il problema - sembra che non rispetti il valore della rightproprietà se leftè anche impostato! ( msdn.microsoft.com/en-us/library/… osserva che lefte rightha un supporto "parziale" in IE7). OK, ammetto che questa soluzione non va bene se il supporto di IE7 è importante, ma un grande trucco da ricordare per il futuro :)

— Will Prescott

7

questa dovrebbe essere la risposta accettata. Avevo due posizioni fisse una per la maschera di opacità, un'altra per il modale. questo era l'unico modo in cui potevo centrare la posizione fissa modale al centro dello schermo. Impressionante risposta chi avrebbe mai pensato?

— Chris Hawkes,

3

Sono d'accordo, questa dovrebbe essere la risposta accettata. Funziona perfettamente anche in un design reattivo, in quanto non dipende dalla larghezza.

— Hector Ordonez,

7

Vorrei suggerire di semplificare la risposta, poiché alcuni dei CSS sono rilevanti solo per il PO. Tutto ciò che serve è la posizione: fissa; sinistra: 0; a destra: 0; margine: 0 auto; .

— Hector Ordonez,

23

Aggiungi un contenitore come:

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

Quindi mettere la tua scatola in questo div farà il lavoro.

— Romulus Urakagi Ts'ai
fonte

"text-align: center" non ha funzionato per me nel centrare il div interno.

— nima,

2

La scatola interna deve essere display: inline-blockaffinché questo funzioni. (Potrebbero funzionare anche alcuni altri valori di visualizzazione, ad esempio table.)

— Brilliand,

un approccio migliore ai suddetti CSS sarebbe l'aggiunta margin:auto;e la modifica della larghezza in width:50%o width:400px. quindi i contenuti possono essere testo semplice, elementi di blocco o elementi incorporati.

— Joshua Burns,

20

Aggiungi solo:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

— peso
fonte

1

Non funziona position: fixed, ed è di questo che si tratta. Se sbaglio, modifica la risposta per includere uno snippet di codice eseguibile.

— Flimm,

1

funziona alla grande con posizione fissa.

— Phuhui,

1

Funziona con position: fixed, a condizione che imposta l'elemento max-widtho widthsull'elemento.

— Js Lim

7

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

al suo interno può esserci qualsiasi elemento con larghezza, altezza o senza diffenet. tutti sono centrati.

— praffessorr
fonte

5

Questa soluzione non ti richiede di definire una larghezza e un'altezza per il tuo div popup.

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

E invece di calcolare la dimensione del popup e meno la metà all'inizio, javascript sta ridimensionando il popupContainer per riempire l'intero schermo ...

(Altezza 100%, non funziona quando si utilizza display: table-cell; (che è necessario centrare qualcosa in verticale)) ...

Funziona comunque :)

— BjarkeCK
fonte

4

left: 0;
right: 0;

Non funzionava con IE7.

Cambiato in

left:auto;
right:auto;

Ha iniziato a funzionare ma negli altri browser smette di funzionare! Quindi utilizzato in questo modo per IE7 di seguito

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

— Jatinder
fonte

Ti dispiace modificare la tua risposta per includere l'intera soluzione?

— Flimm,

Questo non funzionerà senza un margine automatico sui lati sinistro e destro.

— RoM4iK,

2

Fondamentalmente puoi avvolgerlo in un altro dive impostarlo positionsu 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>

Espandi frammento

— Abdulla Dlshad
fonte

2

Ho usato vw(larghezza della finestra) e vh(altezza della finestra). viewport è l'intero schermo. 100vwè la larghezza totale dei tuoi schermi ed 100vhè l'altezza totale.

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

— Aseem
fonte

1

Per correggere la posizione utilizzare questo:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

— HeadAndTail
fonte

3

Fornisci una spiegazione del motivo per cui la tua soluzione funzionerebbe per la domanda pubblicata.

— Shekhar Chikara,

0

Una possibile risposta :

<!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
fonte

Questo sembra funzionare, anche se richiede già di conoscere la larghezza e l'altezza dell'elemento.

— Flimm,

0

Prova a usarlo per elementi orizzontali che non si centrano correttamente.

larghezza: calc (larghezza: 100% - larghezza qualsiasi altra cosa sia fuori centrata )

Ad esempio se la barra di navigazione laterale è 200px:

width: calc(100% - 200px);

— Robert Ross
fonte

0

Uso solo qualcosa del genere:

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

Centra la finestra di dialogo sia in orizzontale che in verticale per me, e posso usare larghezza e altezza diverse per adattarsi a diverse risoluzioni dello schermo per renderlo reattivo, con query multimediali.

Non è un'opzione se hai ancora bisogno di fornire supporto per i browser in cui le proprietà personalizzate CSS o calc()non sono supportate (controlla su caniuse.)

— Fabien Snauwaert
fonte

0

Questo ha funzionato al meglio per me:

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

— Flafy
fonte

-13

L'unica soluzione infallibile è usare table align = center come in:

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

Non riesco a credere che le persone di tutto il mondo sprechino questa quantità copiosa di tempo stupido per risolvere un problema così fondamentale come centrare un div. La soluzione CSS non funziona per tutti i browser, la soluzione jquery è una soluzione di calcolo del software e non è un'opzione per altri motivi.

Ho perso troppo tempo ripetutamente per evitare di usare il tavolo, ma l'esperienza mi dice di smettere di combatterlo. Usa la tabella per centrare div. Funziona sempre con tutti i browser! Non preoccuparti più.

— Cheong
fonte

11

Questo non risponde affatto alla domanda. Non esiste un equivalente non CSS a position:fixed.

— Brilliand,