vertical aligner avec flexbox dans IE11 et IE10

Comment faire une croix navigateur solution où un élément est vertical aligné?

http://jsfiddle.net/e2yuqtdt/3/

Cela fonctionne dans Firefox et Chrome, mais pas dans IE11

<div class="page_login">
    <div>vertical-align:center; text-align:center</div>
</div>

html, body {
    height:100%;
}

.page_login {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    min-height:100px;
    width:200px;
}

mise à jour

Lorsque l'centrée élément est plus élevé que la fenêtre d'affichage de la hauteur de l'arrière-plan est seulement de 100% et pas 100% de défilement de la hauteur

http://jsfiddle.net/e2yuqtdt/8/

html, body {
    min-height:100%;
    height:100%;
}

.page_login {
    display:flex;
    min-height:100%;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}
InformationsquelleAutor clarkk | 2015-01-02
  1. 5

    Comment faire une croix navigateur solution où un élément est à la verticale
    aligné?

    Prendre un coup d'oeil à ce violon: http://jsfiddle.net/5ry8vqkL/

    La technique appliquée il y a à l'aide de la "display: table". Voici un article pour une vue en profondeur de l'approche http://css-tricks.com/centering-in-the-unknown/

    Navigateurs pris en charge peut être vu ici: http://caniuse.com/#search=table-cell

    HTML: 

    <div class="container">
    <div id="page-login">
        <div class="panel">Some content</div>
    </div>
</div>

    CSS:

    html, body {
    min-height:100%;
    height:100%;
}

.container {
    display: table;
    height:100%;
    width:100%;
    background:#303030;
}

#page-login {
    display: table-cell;
    vertical-align: middle
}

.panel {
    height: 100px;
    background-color: #fff;
}
    • il paraît qu'on a eu la même idée
    • Oui. Je préfère cette façon de centrage plutôt que le "nouveau" flexbox.
    InformationsquelleAutor elad.chen
  2. 2

    Vous avez besoin pour ajouter de la hauteur de la div. Comme vous l'avez spécifié seulement une hauteur minimale, c'est à dire étend automatiquement au max possible. Il faut donc ajouter une hauteur, comme ceci:

    .page_login > div {
     margin:auto;
     background:#fff;
     min-height:100px;
     width:200px;
     height:200px;
}

    http://jsfiddle.net/e2yuqtdt/6/

    Que c'est un flex zone, et donc pour vocation de flex, une bonne idée pourrait être de faire de la hauteur d'un pourcentage. De sorte que le div de la hauteur serait, par exemple, à 50% de la hauteur de la page, à moins que la page a été moins de 200px de haut alors il serait 100px de haut.

    Mise à jour: Malheureusement, il n'est pas possible de faire de la div remplir l'ensemble de la page avec uniquement du CSS. Cependant, il semble qu'il est possible avec Javascript, voir ici Faire un div remplir la hauteur du reste de l'espace à l'écran

    En fait - ont reçu l'aide de tables divs

    http://jsfiddle.net/e2yuqtdt/14/

    <div>
    <div id="div1">
        <div id="div2">vertical-align:center; text-align:center</div>
    </div>
</div>


#div1 {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

#div2 {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}

    Je sais que cette mise à jour est à venir après la un par elad.chen - mais l'avait déjà fait et publié dans le commentaire ci - dessous, n'avait simplement pas mis à jour la question.

    • Un nouveau problème.. Quand le centré élément est plus élevé que la fenêtre d'affichage de l'arrière-plan est seulement de 100% et pas 100% de défilement de la hauteur.. avez des questions à jour avec de nouvelles violon
    • voir ma réponse
    • vérifier de nouveau
    • oui.. mais voudrais faire de la "bonne" voie sans tables.. si vous utilisez des tables, vous pourriez faire la mise en page avec des tableaux seule - sans flexbox 🙂
    • Que dire de ce jsfiddle.net/e2yuqtdt/13 - avec les divisions au lieu de tables
    • le violon retourne 404
    • désolé hadnt cliqué sur "enregistrer": D
    • C'est mieux! 😀 mais vous n'avez même pas besoin de style sur l'extérieur div.. regarde ici jsfiddle.net/e2yuqtdt/14
    • Excellent 😀 - mise à jour de ma réponse 😐
    • hmm.. c'est toujours nok fonctionne correctement.. si l'centrée élément est plus petit que la fenêtre d'affichage de la hauteur..

    InformationsquelleAutor CalvT