J'ai une page Web simple avec du contenu Lipsum centré sur la page. La page fonctionne bien dans Chrome et Firefox. Si je réduis la taille de la fenêtre, le contenu remplit la fenêtre jusqu'à ce qu'il ne puisse pas, puis ajoute une barre de défilement et remplit le contenu hors de l'écran, vers le bas.
Cependant, la page n'est pas centrée dans IE11. Je peux centrer la page dans IE en fléchissant le corps, mais si je le fais, le contenu commence à sortir de l'écran vers le haut et coupe le haut du contenu.
Voici les deux scénarios. Voir les Fiddles associés. Si le problème n'est pas évident tout de suite, réduisez la taille de la fenêtre de résultats afin qu'elle soit obligée de générer une barre de défilement.
Remarque: cette application ne cible que les dernières versions de Firefox, Chrome et IE (IE11), qui prennent toutes en charge la recommandation candidate de Flexbox , la compatibilité des fonctionnalités ne devrait donc pas être un problème (en théorie).
Modifier : lorsque vous utilisez l'API Plein écran pour plein écran sur le div externe, tous les navigateurs centrent correctement en utilisant le CSS d'origine. Cependant, en quittant le mode plein écran, IE revient à être centré horizontalement et aligné verticalement en haut.
Edit : IE11 utilise une implémentation spécifique non-fournisseur de Flexbox. Mises à jour de la disposition de la boîte flexible («Flexbox»)
Centre et redimensionne correctement dans Chrome / FF, ne centre pas mais redimensionne correctement dans IE11
Violon: http://jsfiddle.net/Dragonseer/3D6vw/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
Centre correctement partout, coupe le haut lorsqu'il est redimensionné
Violon: http://jsfiddle.net/Dragonseer/5CxAy/
html, body
{
height: 100%;
width: 100%;
}
body
{
margin: 0;
display: flex;
}
.outer
{
min-width: 100%;
min-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.inner
{
width: 80%;
}
-ms-flexbox
pour IE ..