Verticalmente e orizzontalmente Allinea il centro DIV interno della pagina

Possibile duplicato:
Il modo migliore per centrare un

su una pagina verticalmente e orizzontalmente?

La pagina di destinazione del mio sito Web ha DIV Container con altezza e larghezza del 100%. Sono in grado di allineare il div InnerContainer al centro in orizzontale, ma non sono in grado di metterlo al centro verticalmente. Ho cambiato diverse proprietà per lo più rimane il risultato stesso.

Ho lo stesso esempio di http://jsfiddle.net/cwkzq/12/ e non sono sicuro di dove sto facendo le cose sbagliate. Apprezzerei l’aiuto su questo.

Codice CSS

 html, body,form { height: 100%; } body { margin: 0; padding: 0; border: 1; background-color:Aqua; } .Container { width: 100%;height: 100%; padding: 0; font-size: 12px; border:1px solid green; vertical-align: middle; } .InnerContainer { vertical-align: middle; width: 400px;height: 350px; border-left:1px solid; border-right:1px solid; border-color:#f5f5f5;margin: 0 auto; padding: 0; font-size: 12px; background-color:Red; } 

CODICE HTML

  

Principalmente tutti gli esempi su rete hanno larghezza fissa e altezza contenitore DIV mentre nel mio caso il mio contenitore div ha larghezza e altezza 100%

Se conosci la dimensione esatta del blocco che desideri allineare, è il modo più semplice per farlo: jsfiddle

aggiungi questo stile al tuo .InnerContainer

 .InnerContainer{ width: 400px; height: 350px; border-left: 1px solid; border-right: 1px solid; border-color: #f5f5f5; margin: 0 auto; padding: 0; font-size: 12px; background-color: red; position: relative; left: 50%; top: 50%; margin-left: -200px; margin-top: -175px; } 

La risposta è passata alla domanda originale

L’ho fatto: ( demo su dabblet.com )

Il trucco principale in questa demo è che nel normale stream di elementi che vanno dall’alto verso il basso, quindi il margin-top: auto è impostato su zero. Tuttavia, per un elemento posizionato in modo assoluto agisce sulla stessa distribuzione di spazio libero, e allo stesso modo può essere centrato verticalmente in top e in bottom specificati (non funziona in IE7).

Questo trucco funziona con qualsiasi dimensione di div .

HTML:

 

CSS:

 div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; } 

Ciao, ora puoi usare molti metodi di questa soluzione come in questo modo

Css

 .wraptocenter { display: table-cell; text-align: center; vertical-align: middle; width: ...; height: ...; } .wraptocenter * { vertical-align: middle; } .wraptocenter { display: block; background:green; height:500px; } .wraptocenter span { display: inline-block; height: 100%; width: 1px; } .child{ background:pink; min-height:100px; width:100px; display:inline-block; } 

HTML

 
Hello I am child and ver and horz....

Demo live http://jsfiddle.net/w9dxv/1/

maggiori informazioni http://www.brunildo.org/test/img_center.html


se si desidera allineare il centro orizzontale e verticale

Css

 .chv{ width:200px; height:100px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-50px; border:solid 1px red; } 

HTML

 
Center horizontal and vertical align

Demo live http://jsfiddle.net/HkEVZ/1/


se vuoi Centra orizzontalmente e verticalmente una singola riga di testo

Css

 .alldiv{ width:400px; height:200px; text-align:center; line-height:200px; border:solid 1px red; } 

HTML

 
Center horizontally and vertically a single line of text

Demo live http://jsfiddle.net/SVEtH/1/


se si desidera allineare il centro orizzontale e verticale Utilizzato per presentare le proprietà come questo ..

Css

 .parent{ display:table; height:300px; text-align:center; border:solid 1px red; width:100%; } .child{ display:table-cell; vertical-align:middle; border:solid 1px green; } 

HTML

 
Center horizontal and vertical align

Demo live http://jsfiddle.net/J3Zc6/2/