Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.

L'astuce est d'appliquer ce CSS sur les flex items :

.your-flex-items {
  margin-top: auto;
  margin-bottom: auto;
}

En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.

Des soucis à venir avec le nouvelle élément HTML <dialog>.

C'est pas encore pour tout de suite mais si vous voulez jeter un coup d'oeil sur l'élément HTML <dialog> c'est par ici.

Pour l'instant, ça ne marche dans Firefox qu'avec un flag about:config spécifique activé.