centro allineando una posizione fissa div


127

Sto cercando di ottenere un div con il position:fixedcentro allineato sulla mia pagina.

Sono sempre stato in grado di farlo con div posizionati in modo assoluto usando questo "hack"

left: 50%; width: 400px; margin-left:-200px

... dove il valore per margin-left è la metà della larghezza del div.

Questo non sembra funzionare per i div a posizione fissa, invece li posiziona semplicemente con l'angolo più a sinistra al 50% e ignora la dichiarazione del margine sinistro.

Qualche idea su come risolvere questo problema in modo da poter allineare al centro gli elementi posizionati fissi?

E aggiungerò un bonus M&M se puoi dirmi un modo migliore per centrare allineare gli elementi assolutamente posizionati rispetto a come ho descritto sopra.


Per me va bene. In tutti tranne IE6 (ovviamente).
bobince

@Kyle se potessi scegliere una risposta aiuterebbe gli altri utenti a identificare la soluzione per il tuo problema.
andreihondrari

Risposte:


202

La risposta di Koen non centra esattamente l'elemento.

Il modo corretto è usare la CCS3 transformproprietà. Sebbene non sia supportato in alcuni vecchi browser . E non abbiamo nemmeno bisogno di impostare un fisso o relativo width.

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

Confronto jsfiddle funzionante qui .


1
è perfetto. L'ho usato per un'applicazione Cordova e dovrebbe funzionare nei principali browser aggiornati :)
saurabh

2
Molto semplice ma totalmente utile. Grazie.
Gilberto Sánchez

Wow grazie! Ho provato a centrare il testo tra due div irregolari e questo è l'unico che funziona senza distruggere il markup!
Andrey Kaipov

4
La vera risposta +1
sn3ll

3
@Alex left: 50%sposta il div al 50% della pagina. Tieni però presente che lo sposta partendo dal lato sinistro del div, quindi il div non è ancora centrato. translate(-50%, 0)che fondamentalmente translateX(-50%)considera la larghezza corrente del div e lo sposta del -50% della sua larghezza sul lato sinistro dal luogo effettivo.
emil.c

168

Per quelli che hanno lo stesso problema, ma con un design reattivo, puoi anche usare:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

In questo modo manterrai sempre il tuo fisso divcentrato sullo schermo, anche con un design reattivo.


2
Questo mi ha aiutato con un progetto RWD :)
tctc91

6
da dove viene questo 37,5%?
aurora

7
@aurora - è -1/2 dell'impostazione della posizione (quindi -(75/2)in questo caso)
Inaimathi

1
Perché non è questa la risposta accettata è un mistero, funziona e basta (tm)
CGK

2
Cropis ha una soluzione migliore
Arnaldo Capo

44

Potresti usare flexbox anche per questo.

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}
<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>


12
perché preoccuparsi di menzionare center e align = "center"? text-align: center is the way
wlf

1
Dovresti includere lo stile di allineamento del testo nel tuo esempio.
Manatax

Grazie mille! Questo mi ha davvero aiutato!
Joan.bdm

Ho modificato la mia risposta rimuovendo la menzione <center>che era stata deprecata e utilizzando una tecnica moderna come il display: flexe alcune proprietà associate.
andreihondrari

33

Dal post sopra, penso che il modo migliore sia

  1. Avere un div fisso con width: 100%
  2. All'interno del div, crea un nuovo div statico con margin-left: autoand margin-right: auto, or for table make it align="center".
  3. Tadaaaah, ora hai centrato il tuo div fisso

Spero che questo ti aiuti.


2
+1 molto utile se devi centrare anche un div con larghezza fissa. Ad esempio 990px.
dcernahoschi

Questo è anche l'unico modo che conosco per consentire max-widths per elementi a posizione fissa. Vuoi una barra laterale fissa che prenda in modo reattivo il 30% della tua max-width: 1200pxpagina web? Questo ti porterà lì.
Michael

7

I div normali dovrebbero usare margin-left: autoe margin-right: auto, ma questo non funziona per i div fissi. Il modo per aggirare questo è simile alla risposta di Andrew , ma non usa la <center>cosa deprecata . Fondamentalmente, dai un wrapper al div fisso.

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}
<div id="wrapper">
    <div id="fixed_div"></div>
</div

Ciò centrerà un div fisso all'interno di un div consentendo al tempo stesso di reagire con il browser. cioè Il div sarà centrato se c'è abbastanza spazio, ma entrerà in collisione con il bordo del browser se non c'è; simile a come reagisce un div centrato regolare.


4

Se vuoi centrare l'allineamento di una posizione fissa div sia verticalmente che orizzontalmente usa questo

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

4
<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

Questo dovrebbe fare lo stesso.


3

Se sai che la larghezza è di 400 px, questo sarebbe il modo più semplice per farlo, immagino.

 left: calc(50% - 200px);

2

Funziona se vuoi che l'elemento si estenda sulla pagina come un'altra barra di navigazione.

width: calc (width: 100% - width qualunque altra cosa sia fuori centratura)

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

larghezza: calc (100% - 200px);


1

È abbastanza facile usare la larghezza: 70%; sinistra: 15%;

Imposta la larghezza dell'elemento al 70% della finestra e lascia il 15% su entrambi i lati


1

Ho usato quanto segue con Twitter Bootstrap (v3)

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

Ad esempio, creiamo un elemento a larghezza intera che sia in posizione fissa e spinga semplicemente un contenitore al suo interno, il contenitore è centrato rispetto alla larghezza completa. Dovrebbe comportarsi bene anche in modo reattivo.


0

Una soluzione che utilizza flex box; completamente reattivo:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

-1

se non vuoi usare il metodo wrapper. allora puoi farlo:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}
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.