Vertical Alignement - IE10 Flex box ne fonctionne pas

J'ai mon centre de l'alignement de travail dans tous les navigateurs qui le supportent en dehors de IE10. Je pense que j'ai la syntaxe correcte et qu'elle prend-il en charge. Quelqu'un pourrait-il aider? DÉMO

html {
    height: 100%;
}
body {
    background: red;
    font-family: 'Open Sans';
    min-height: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;
    display: -ms-flexbox;
    -ms-box-orient: horizontal;
    -ms-box-pack: center;
    -ms-box-align: center;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    text-align: center;
}
.box {
    background: none repeat scroll 0 0 #E7F3FF;
    border: 4px solid #FFFFFF;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 2px 2px rgba(1, 1, 1, 0.2);
    color: #054B98;
    height: 620px;
    margin: 0 auto 20px;
    position: relative;
    width: 930px;
}
Btw, vous n'avez pas besoin de spécifier ligne/direction horizontale, sauf si vous êtes remplacement d'une colonne précédente/direction verticale ailleurs. La ligne horizontale est la valeur par défaut.

OriginalL'auteur 2ne | 2013-06-06

  1. 12

    Vous avez le droit d'affichage de la valeur, mais tous les autres Flexbox propriétés que vous utilisez sont mauvais. La traduction correcte serait comme ceci:

    body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

    Toutefois, si vous utilisez Flexbox pour l'alignement vertical des fins, ce pourrait être ce dont vous avez besoin au lieu de cela:

    body {
  background: red;
  font-family: 'Open Sans';
  min-height: 100%;
  width: 100%;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -moz-box-align: center;

  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

    Note que le champ d'alignement et de flex-aligner/aligner-éléments sont pas des propriétés équivalentes, mais qu'ils effectuent la même tâche ici.

    J'ai dû ajouter de la hauteur: 100% au lieu de min-height comme ça ne fonctionnait pas. Maintenant, il est très bien sous IE mais sous Firefox, j'ai un imaginaire 8px marge supérieure sur le corps. J'ai un reset sur mon projet, donc je ne sais pas d'où cela pourrait venir de la
    C'est un bug Firefox

    OriginalL'auteur cimmanon

  2. 2

    L'ajout explicite d'une hauteur semble être la solution la plus appropriée.

    À partir de: Microsoft Connect - Min-height et flexbox (flex-direction:colonne) ne travaillent pas ensemble dans IE 10 & 11-aperçu

    Dans tous les autres navigateurs qui prennent en charge flexbox, un flex-direction:column en fonction conteneur flex mettra à l'honneur les conteneurs min-height pour calculer flex-grow longueurs. Dans IE10 & 11-aperçu il semble que le travail avec un explicite height valeur.

    Simple et bien documentée de la réponse! Très utile.

    OriginalL'auteur Ariella