Come faccio a centrare il contenuto assolutamente posizionato di larghezza sconosciuta?

Question

Prima che qualcuno mi chieda perché diavolo vorrei fare questo, fammi uscire subito e dirtelo. In questo modo uno di voi fa capolino in modo intelligente può dirmi un modo molto migliore ...

Sto facendo un visualizzatore per i dipinti che dovrebbero allungarsi per riempire la pagina, ben il 90% dell'altezza dello schermo per essere preciso. Voglio sfumare i dipinti in uno sopra l'altro e voglio centrare ognuno di essi nel mezzo dello schermo.

Per sfumare i dipinti l'uno sopra l'altro, è necessario posizionarli in modo "assoluto" per impedirne l'accatastamento. Ecco dove arriva il problema. Da quando li ho impostati all'assoluto, ogni metodo che utilizzo per centrare il div contenitore non ha funzionato.

Parte del problema è che non sto impostando alcuna larghezza per i dipinti perché voglio che si dimensionino in modo dinamico per riempire il 90% dello schermo dell'utente.

Ho trovato un centinaio di metodi per centrare il contenuto assoluto e ritengo che potrebbe essere necessario restringere il div contenitore. Tuttavia non ho ancora avuto alcun successo.

HTML-

<div id="viewer_div"> 
    <img src="" id="first" /> 
    <img id="second" class="hidden"/> 
</div> 

Style Sheet

#viewer_div { 
     width:1264px; 
} 


img { 
    height:90%; 
    display:block; 
    margin-left: auto; 
    margin-right:auto; 
} 

È possibile che questo mi dà l'effetto desiderato, ma non mi permette di posizionare le immagini in assoluto. Qualcuno può suggerire un modo per centrare le immagini, ma mi permette anche di sfumare l'una sull'altra?

Answer 1

O utilizzare JavaScript per calcolare la larghezza e spostarla,

usare un hack CSS per spostare l'elemento a destra ea sinistra del 50%,

o non assolutamente posizionarlo.

---

Questa risposta è incredibilmente breve, ma è al punto. Se hai bisogno di qualcosa da centralizzare (nel senso che desideri che il browser determini dove si trova il punto centrale e posizionalo lì), non puoi usare il posizionamento assoluto - perché questo toglie il controllo dal browser.

---

Per dissolvere i dipinti in uno sopra l'altro ho bisogno di posizionarli 'assoluta' per impedire loro di accatastamento.

Questo è dove si trova il tuo problema. Hai assunto che tu abbia il posizionamento assoluto per il motivo sbagliato.

Se si verificano problemi che immettono elementi su uno sopra l'altro, avvolgere le immagini in un contenitore posizionato in modo assoluto che è la larghezza del 100% e ha text-align: center

---

Se ritenete che il posizionamento assoluto è necessario, il seguente trucco può essere utilizzato per ottenere i risultati desiderati:

div { 
    position: absolute; 
    /* move the element half way across the screen */ 
    left: 50%; 
    /* allow the width to be calculated dynamically */ 
    width: auto; 
    /* then move the element back again using a transform */ 
    transform: translateX(-50%); 
} 

Ovviamente quanto sopra mod ha un terribile code smell, ma funzionano s su alcuni browser. Attenzione: questo trucco non è necessariamente ovvio per altri sviluppatori o altri browser (in particolare IE o dispositivi mobili).

Answer 2

Spingere l'elemento left di 50% della larghezza e quindi tradurlo orizzontalmente per 50% ha funzionato per me.

.element { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

ho trovato il concetto nel seguente link, e poi ho tradotto per adattare il mio align orizzontale bisogno: https://gist.github.com/colintoh/62c78414443e758c9991#file-douchebag-vertical-align-css

Answer 3

di andare fuori della risposta di Samec, è anche possibile utilizzare questo per centrare un elemento posizione assoluta verticalmente e orizzontalmente di dimensioni sconosciute:

#viewer_div { 
    position: relative; 
} 
#viewer_div img { 
    position: absolute; 
    left: 50%; 
    top: 0%; 
    transform: translate(-50%, 50%); 
}