[Résolu]Centrer verticalement dans une position absolute, méthodes

Bonjour à tous,


Comme vous pouvez le voir sur ce lien , "j'essaie" de centrer verticalement les éléments enfant du <figcaption>.
J'aimerais savoir si la méthode "flex" utilisée ici est pertinente ou envisager une autre solution plus simple ?

<figure>                    
            <img src="https://image.jpg"/> 
                            
            <figcaption class="valign-wrapper">
                  <div>
                        <h2>mouse</h2>
                        <p>rodent</p>
                  </div>    
            </figcaption>                
</figure>

figure figcaption {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

figcaption.valign-wrapper{
    align-items: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

figcaption > div {
    text-align: center;   
    width: 100%;  
}

Merci
Modifié par olimann (06 Jul 2015 - 15:46)

La methode est pertinente si tu ne cible que des navigateurs récents, pour le cop tu pourrait aussi peut-être te servir de mix-blend-mode plutôt qu'opacity http://fiddle.jshell.net/ucw5b0b1/20/

Merci pour la réponse,

Tu parles évidement de IE mais là c'est un lourd débat. Reculer ou avancer ?
http://caniuse.com/#search=flex

Personnellement, ma cible sont des professionnels dans le milieu graphique donc j'imagine qu'ils sont à jour dans ce domaine et puis sachant que les choses évolueront, Je préfère avancer.

D’ailleurs y a-t-il un débat sur ce sujet ?

Pour le "mix-blend-mode", c'est juste un choix graphique !
http://jsfiddle.net/olimann/ucw5b0b1/23/
Modifié par olimann (05 Jul 2015 - 17:41)