centro allineando una posizione fissa div

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.

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 .

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.

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>

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.

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.

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

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

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

 left: calc(50% - 200px);

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

È 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

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.

Una soluzione che utilizza flex box; completamente reattivo:

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

child_div {
    /* whatever you want */
}

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 */
}