Allineamento al centro su una divisione con posizionamento assoluto

93

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Il div è in alto, ma non riesco a centrarlo con <center>o margin: 0 auto;

html css xhtml

— Steve
fonte

152

Il tuo problema potrebbe essere risolto se dai divuna larghezza fissa, come segue:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

— JacobE
fonte

1

Non so perché non ci ho pensato, anche se usiamo sempre la stessa tecnica per il centraggio verticale ... Grazie comunque, mi hai risparmiato un sacco di tempo.

— Aayush

1

cosa succede se l'utente ha fatto scorrere verticalmente verso il basso il div appare nella parte superiore della pagina mentre dovrebbe apparire nell'area visibile

— PUG

Sto visualizzando le miniature delle immagini reszied dinamicamente nel mio div overlay, quindi non conosco la larghezza.

— PUG

4

questa è solo una soluzione alternativa, stackoverflow.com/questions/1776915/… sembra essere la soluzione

— PUG

1

Questa non è la risposta giusta. Un tipo di supporto diverso non supporterà questo snippet.

— Sushan

97

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

— Matheus Oliveira
fonte

3

Come funziona? Puoi per favore fornire perché la tua risposta è valida?

— afuzzyllama

1

Mi piace molto questo metodo rispetto ad altri il 99% delle volte, non devi occuparti di riempimento, bordi, ecc. Non l'ho mai visto fallire, la prossima volta fornisci un esempio se fallisce per te.

— Dan

1

La cosa interessante di questa soluzione è che funziona anche con le percentuali, ma non sono sicuro che sia compatibile con tutti i browser

— maljukan

1

Wow. Non mi aspettavo che funzionasse, ma per me ha funzionato come un incantesimo

— Awais Umar

4

Sono d'accordo che questa dovrebbe essere la risposta corretta, un margine di -200px mi urla hack.

— Mani5556

36

So di essere in ritardo alla festa, ma ho pensato di fornire una risposta qui per le persone che hanno bisogno di posizionare orizzontalmente un oggetto assoluto, quando non si conosce la sua larghezza esatta.

Prova questo:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

La stessa tecnica può anche essere applicata, per quando potrebbe essere necessario l'allineamento verticale, semplicemente regolando le proprietà in questo modo:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

— Michael Giovanni Pumo
fonte

1

Whaaat. Questo e spettacolare! Potresti spiegare come funziona? Modifica: ho cercato un po 'e sembra che la sinistra: il 50% sposti la posizione sinistra del div al centro, che non è proprio al centro. Ma translateX lo riporta indietro del 50% rispetto alla larghezza del contenuto

— Aziz Javed

2

Il posizionamento assoluto si posizionerà dall'angolo in alto a sinistra di un elemento. L'uso della traduzione lo sposterà nella quantità relativa alla sua dimensione.

— Michael Giovanni Pumo

3

Michael, volevo solo che tu lo sapessi, non sei arrivato in ritardo alla festa ... e per chi non lo sa: transform: translate (-50%, -50%); fa sia il centraggio verticale che quello orizzontale con 1 linea

— Marvel Moe

4

Per centrarlo sia verticalmente che orizzontalmente fai questo:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

— Armin
fonte

0

Se è necessario che tu abbia una larghezza relativa (in percentuale), puoi racchiudere il tuo div in uno con posizione assoluta:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

Ricorda che per posizionare un elemento in modo assoluto, l'elemento genitore deve essere posizionato relativamente.

— dalvallana
fonte

0

Stavo avendo lo stesso problema e il mio limite era che non posso avere una larghezza predefinita. Se il tuo elemento non ha una larghezza fissa, prova questo

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

quindi modifica il tuo html in questo modo

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

— Usman Shaukat
fonte

0

Oppure puoi usare unità relative, ad es

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

— Aliaksei
fonte

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Espandi lo snippet

— panwar
fonte

-22

Sì:

div#thing { text-align:center; }

5

Questo allineerà i contenuti all'interno di un div. Non allineerà il div al centro della pagina. Inoltre, non allineerà un div posizionato in modo assoluto in alcun modo diverso dai contenuti al suo interno che fanno parte del flusso del documento.

— CarterMan