CSS schermo intero div con il testo in mezzo

Ho una classe CSS definita in modo da poter fare un div di utilizzare tutte le viewport del browser, la regola è la seguente:CSS schermo intero div con il testo in mezzo

.fullscreenDiv { 
    background-color: #e8e8e8; 
    width: 100%; 
    height: auto; 
    bottom: 0px; 
    top: 0px; 
    left: 0; 
    position: absolute; 
}

Ora voglio il testo all'interno il div deve essere esattamente al centro dello schermo, quindi il centro di allineamento verticale e il centro di allineamento orizzontale, ma non riesco a trovare il modo corretto di farlo.

Ha solo bisogno di lavorare su browser basati su webkit.

Ho già provato ad aggiungere un elemento P all'interno con display impostato su table-cell (un modo comune di centrare il testo) senza fortuna.

Qualche suggerimento?

fonte

2012-05-22 Juan Alberto López Cavallotti

'' 'text-align: center; posizione: assoluta; superiore: 50%; inferiore: 50%; larghezza: 100%; '' '- Questo dovrebbe funzionare meglio della risposta accettata - Aggiungi gli stili al tuo bit di testo – James111

L'approccio standard è quello di dare la centrato elemento dimensioni fisse, e posizionarlo assolutamente:

<div class='fullscreenDiv'> 
    <div class="center">Hello World</div> 
</div> 

.center { 
    position: absolute; 
    width: 100px; 
    height: 50px; 
    top: 50%; 
    left: 50%; 
    margin-left: -50px; /* margin is -0.5 * dimension */ 
    margin-top: -25px; 
}

DEMO

fonte

2012-05-22 17:53:11 paislee

Sto provando con questo, ma se volessi centrare il testo nel mezzo del" centro " "div pure? –

@ JuanAlbertoLópezCavallotti Si sta solo riproducendo il problema. Aggiungere 'text-align: center' alla classe' center' ti farebbe arrivare a metà strada. Se è solo una riga di testo, puoi aggiungere l'altezza della riga: 50px' o qualunque sia l'altezza del contenitore centrato. Ciò lo centrerà verticalmente pure. – paislee

Non sono sicuro se fosse necessario l'elemento extra, ma qui vai: http://jsfiddle.net/wzSmc/1/ – FelipeAls

text-align: center sarà centrare orizzontalmente come per verticale metterlo in un arco e dargli un css di margin:auto 0; (probabilmente si dovrà anche per dare l'arco di una proprietà display: block)

fonte

2012-05-22 17:51:53 Ryan

Non esiste una soluzione CSS pura per questo problema classico.

Se si vuole raggiungere questo obiettivo, ci sono due soluzioni:

utilizzando una tabella (brutto, non semantica, ma l'unico modo per allineare verticalmente le cose che non sono una sola riga di testo)
Ascoltando window.resize e posizionamento assoluto

EDIT: quando dico che non esiste una soluzione, prendo come un ipotesi che non si conosce in un dvance la dimensione del blocco da centrare. Se tu lo sai, la soluzione di Paislee è molto buona

fonte

2012-05-22 17:54:16

Le opere risposta accettata, ma se:

non si conosce le dimensioni del contenuto
il contenuto è dinamico
si vuole essere prova di futuro

uso questo:

.centered { 
    position: fixed; /* or absolute */ 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

Ulteriori informazioni sulla centratura dei contenuti in questo eccellente CSS-Tricks article.

Inoltre, se non è necessario per supportare i vecchi browser: un flex-box lo rende un pezzo di torta:

.center{ 
    height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

Un'altra grande guida su flexboxs da Trucchi CSS; http://css-tricks.com/snippets/css/a-guide-to-flexbox/

fonte

2014-12-23 04:41:03 agconti

CSS schermo intero div con il testo in mezzo

risposta

Problemi correlati