Eu estou tentando centralizar verticalmente itens com flexbox do CSS; e, eu sei como fazer isso com o código não-prefixado pelo fornecedor, mas mesmo com os prefixos do fornecedor, não consigo fazê-lo funcionar no Webkit (Chrome).

Eu estou tentando alinhar verticalmente as extensões no #trigger.

Aqui está o meu CSS:

#trigger{
    /* 2009 syntax */
    display: -webkit-box;
    display: box;
    /* current syntax */
    display: -webkit-flex;
    display: flex;
}

#trigger span{
    /* 2009 syntax */
    -webkit-box-align: center;
    /* current syntax */
    -webkit-align-items: center;
    flex-align: center;
}

Alguma idéia do que estou fazendo errado?

E se você conhece os outros prefixos / versões de fornecedores das propriedades que estou usando, fique à vontade para compartilhá-los para que isso funcione em mais do que apenas Webkit.