Centrare verticalmente il contenuto della pagina

So come posso centrare orizzontalmente l'intera pagina con i CSS. Ma c'è un modo per centrare verticalmente la pagina? Qualcosa di simile ...Centrare verticalmente il contenuto della pagina

Example

fonte

2011-03-12 Pieter

Spero che ti aiuta http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ –

Grande articolo ... '.className {width: 300px; height: 200px; position: absolute; a sinistra: 50%; superiore: 50%; margine: -100px 0 0 -150 px; } "lo ha fatto per me. Puoi postare questo come una risposta alla mia domanda in modo che io possa accettarlo? – Pieter

C'è un grande articolo in MicroTut di farlo http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

centraggio con i CSS:

.className{ 
    width:300px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; 
}

centraggio con JQuery:

$(window).resize(function(){ 

    $('.className').css({ 
     position:'absolute', 
     left: ($(window).width() - $('.className').outerWidth())/2, 
     top: ($(window).height() - $('.className').outerHeight())/2 
    }); 

}); 

// To initially run the function: 
$(window).resize();

E si può vedere una demo here

fonte

2011-03-12 13:40:50

È anche possibile dirottare di display: table e display: table-cell per questo scopo CSS. Il codice HTML sarebbe come questo:

<body> 
    <div id="body"> 
     <!-- Content goes here --> 
    </div> 
</body>

E il CSS:

html, 
body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: middle; 
}

Se volete centratura orizzontale che, quindi aggiungere questo:

#body { 
    max-width: 1000px; /* Or whatever makes sense for you. */ 
    margin: 0 auto; 
}

Qualcuno potrebbe chiamare questo un abuso di CSS ma:

Funzionerà esattamente lo stesso praticamente ovunque
Richiede markup e stile minimi.
E l'allineamento verticale del CSS merita un po 'di abuso; l'allineamento verticale non dovrebbe richiedere l'hacking, le contorsioni e il dimensionamento assoluto che fa.

Riferimenti:

fonte

2011-03-12 21:38:39

Centrare verticalmente il contenuto della pagina

risposta

Problemi correlati