Comment faire une boîte flottante au centre de l'écran avec une mise en page responsive?

Question

J'essaie d'entrer dans la conception/mise en page réactive avec Bootstrap et CSS, mais je suis un peu confus de la façon dont une boîte de changement pourrait être au centre de l'écran.

J'ai un volet de connexion qui dans Google Chrome a la taille 277x256 (cette taille pourrait s'adapter à de nombreux écrans de smartphones). Je fis donc un CSS comme ça:

.login .pane { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -128px -138.5px; /* half of the size in Google Chrome */ 
    background: #f0f0fd; 
    background: rgba(240,240,253,0.90); 
    padding: 22px 32px; 
} 

Vous pouvez voir le code complet: http://jsfiddle.net/H5Qrh/1/

=== === MISE À JOUR

J'ai fait un code plus propre et essayé d'utiliser à la place Absolute Centrage des marges négatives:

.center-pane { 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    max-width: 277px; 
    height: 320px; 
} 

Mon Fiddle mise à jour: http://jsfiddle.net/H5Qrh/3/

Maintenant, le pied de page est au-dessus de la boîte .. cela ne devrait pas occour.

Answer 1

Vous utilisez absolute mais je changerais cela en fixed (cela fonctionnera sur les deux).

Je définis votre taille et vos largeurs, mais vous pouvez les modifier, et comme vous le souhaitez, vous pouvez les modifier avec quelques requêtes de média. Par exemple, vous pouvez vouloir que la largeur soit de 90% ou 100%.

.login .pane { 
    position: fixed; /* could be absolute */ 
    top: 0; left: 0; bottom: 0; right: 0; 
    margin: auto; 
    width: 300px; 
    height: 250px; 
} 

Voici un jsfiddle