Positionnement CSS avancé. Center & Middle

Question

Je veux placer un <div>

• Pour Centre avec le corps WRT largeur
• du Milieu avec la hauteur du corps wrt

Le div aura ces propriétés:

• largeur de div sera 90%
• hauteur de div auto, min. sera connu

Answer 1

J'ai testé cela dans IE8, Firefox, Chrome. Cela ne fonctionne pas dans IE7.

Si vous avez besoin que cela fonctionne dans < = IE7, j'imagine que la solution la plus simple serait d'abandonner le CSS pur et d'utiliser javascript pour le positionnement vertical.

Live Demo

HTML:

<div id="container"> 
    <div id="content"> 
     <input type="button" value="click me" onclick="javascript:document.getElementById('content').innerHTML += 'i i i i i i i i i i i i i i i i i i i i i i i i i<br />';" /><br /> 
     i i i i i i i i i i i i i i i i i i i i i i i i i<br /> 
     i i i i i i i i i i i i i i i i i i i i i i i i i<br /> 
     i i i i i i i i i i i i i i i i i i i i i i i i i<br /> 
     i i i i i i i i i i i i i i i i i i i i i i i i i<br /> 
    </div> 
</div> 

CSS:

html, body { 
margin: 0; 
padding: 0; 
border: 0; 

width: 100%; 
height: 100% 
} 

body { 
display: table 
} 

#container { 
width: 100%; 
display: table-cell; 
vertical-align: middle 
} 

#content { 
background: red; 
width: 90%; 
margin: 0 auto; 
min-height: 150px 
}