div verticalement

Question

Je me rends compte qu'il y a beaucoup d'exemples là-bas, et je travaille à partir d'un, mais n'arrive pas à le faire fonctionner correctement.

Voici ce que j'ai actuellement:

<div id="w"> 
    <div id="iw"> 
     <a href="#"> 
      <img src="http://stackoverflow.com/content/stackoverflow/img/apple-touch-icon.png" /> 
     </a> 
    </div> 
</div> 

Et:

body { 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#w { 
    display:table; 
    width: 100%; 
} 
#iw { 
    display:table-cell; 
    text-align:center; 
    vertical-align:middle; 
} 
#iw a img { 
    -moz-box-shadow:0 1em 1em #444; 
    -webkit-box-shadow:0 1em 1em #444; 
    -o-box-shadow:0 1em 1em #444; 
    box-shadow:0 1em 1em #444; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius: 10px; 
} 

(http://jsfiddle.net/rlemon/zjWaz/)

Fondamentalement, je veux centrer verticalement et horizontalement le récipient iw.

L'idée que j'avais lue à propos du conteneur d'emballage est display: table; et le contenu interne est display: table-cell; et vous pouvez ensuite utiliser l'alignement vertical de la table. Génial, maintenant comment faire de la table 100% de la hauteur de la page? le mieux que je peux faire est une hauteur fixe, qui (sans l'utilisation de JS) ne m'aidera pas à être exactement centré verticalement.

Answer 1

Essayez la place CSS suivante:

html,body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
    border:1px solid #000; 
} 
#w { 
    display:table; 
    height:100%; 
    width: 100%; 
} 
#iw { 
    display:table-cell; 
    text-align:center; 
    height:100%; 
    width:100%; 
    vertical-align:middle; 
} 
#iw a img { 
    -moz-box-shadow:0 1em 1em #444; 
    -webkit-box-shadow:0 1em 1em #444; 
    -o-box-shadow:0 1em 1em #444; 
    box-shadow:0 1em 1em #444; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius: 10px; 
} 

Voir ceci dans un violon mise à jour: http://jsfiddle.net/zjWaz/1/

Answer 2

si vous connaissez la largeur et la hauteur plus facile serait de iw position absolue, supérieure: 50%; gauche: 50% et régler la hauteur marge de la moitié négative et la largeur (permet de dire que la largeur/hauteur sont 200px cette façon margin: -100px 0 0 -100px)

Answer 3

Cocher cette Css

body { 
width:100%; 
margin:0; 
padding:0; 
} 
#w { 
display:table; 
width: 100%; 
} 
#iw { 
width:100%; 
height:100%; 
position:absolute; 
left:50%; 
top:50%; 
margin-left:-100px; 
margin-top:-50px; 
} 
#iw a img { 
-moz-box-shadow:0 1em 1em #444; 
-webkit-box-shadow:0 1em 1em #444; 
-o-box-shadow:0 1em 1em #444; 
box-shadow:0 1em 1em #444; 
-moz-border-radius:10px; 
-webkit-border-radius:10px; 
-o-border-radius:10px; 
border-radius: 10px; 
} 

Mise à jour Fiddle Jetez également. http://jsfiddle.net/zjWaz/4/

J'espère que vous aurez votre réponse.

Answer 4

vous n'avez pas besoin de js ou comme quelque chose, il suffit d'appliquer le style comme une table: affichage: table et table rangée avec 100%. regarder pour plus d'informations ici: http://linuxandfriends.com/2009/04/04/how-to-style-div-elements-as-tables/

Ou mieux, vous pouvez le faire avec un div fixe