Centrage Vertical flexbox de superposition dans iOS safari

J'ai le code suivant pour mon flexbox superposition

.overlay-content-wrapper {
  display: -webkit-flex;
  display: flex;
  position:fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 999;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.overlay-content {
    padding: 8px;
    min-height: 10px;
    min-width: 10px;
    margin: auto;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #a5a5a5;
    position: relative;
}

<div class="overlay-content-wrapper"><div class="overlay-content">Some content</div></div>

Dans google Chrome, il fonctionne parfaitement, mais dans iOS safari (v6 simulateur) qu'il n'a pas centrer verticalement. Que dois-je modifier pour le faire fonctionner?

OriginalL'auteur wheresrhys | 2013-06-20

  1. 34

    Après de creuser autour pour un certain temps, j'ai découvert que iOS safari prend en charge l'une des anciennes syntaxes avec teh webkit préfixe (compte tenu de sa part de marché, il est surprenant de plus flexbox tutoriels/outils ne comprennent pas l'ancienne syntaxe... mais hé ho).

    Voici donc la version définitive de mon CSS qui devrait fonctionner dans tous les navigateurs qui prend en charge certaines version de flexbox et retombe à l'horizontale de centrage dans les autres navigateurs.

    .overlay-content-wrapper {
  display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox; /* TWEENER - IE 10 */
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  position:fixed;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.overlay-content {
    padding: 8px;
    min-height: 10px;
    min-width: 10px;
    margin: auto;
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #a5a5a5;
    position: relative;
}
    merci! vous rock.
    votre un champion merci.

    OriginalL'auteur wheresrhys

  2. 0

    J'ai eu le même problème; aligner les enfants (avec un titre et une icône) d'un conteneur flex avec align-items: center. L'icône correctement aligné au centre, mais mon titre alignée avec le haut à cause de sa hauteur.

    Ajoutant align-self: center pour le titre CSS résolu!

    OriginalL'auteur Calsal