Flexbox: centro horizontalmente e verticalmente

Acho que você quer algo como o seguinte.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Ver demonstração em: http://jsfiddle.net/audetwebdesign/tFscL/

Seus elementos .flex-item' devem ser nível de bloco (div' ao invés de `span') se você quiser que a altura e o estofamento superior/inferior funcionem corretamente.

Além disso, em .row', defina a largura paraauto' ao invés de `100%'.

As suas propriedades .flex-container são boas.

Se você quiser que o .row' seja centrado verticalmente na porta de visualização, atribua 100% de altura aohtml' e ao corpo', e também zere as margens docorpo'.

Note que `.flex-container' precisa de uma altura para ver o efeito de alinhamento vertical, caso contrário, o recipiente calcula a altura mínima necessária para fechar o conteúdo, que é menor do que a altura da porta de visualização neste exemplo.

Nota de rodapé: As propriedades flex-flow',flex-direction', flex-wrap' poderiam ter tornado este design mais fácil de implementar. Eu acho que o.row' container não é necessário a menos que você queira adicionar algum estilo em torno dos elementos (imagem de fundo, bordas e assim por diante).

Um recurso útil é: http://demo.agektmr.com/flexbox/

Como Centralizar Elementos Verticalmente e Horizontalmente no Flexbox

Abaixo estão duas soluções de centralização geral.

Um para itens flexíveis alinhados verticalmente (flex-direction: column) e o outro para itens flexíveis alinhados horizontalmente (flex-direction: row).

Em ambos os casos, a altura dos mergulhos centrados pode ser variável, indefinida, desconhecida, o que quer que seja. A altura dos mergulhos centrados não'não importa.

Aqui's o HTML para ambos:

<div id="container">

    <div class="box" id="bluebox">
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox">
        <p>DIV #2</p>
    </div>

</div>

CSS (excluindo estilos decorativos)

Quando os itens flexíveis são empilhados verticalmente:

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* will center text in <p>, which is not a flex item */
}

[**DEMO***](http://jsfiddle.net/8o29y7pd/)

Quando os itens flexíveis são empilhados horizontalmente:

Ajuste a regra `flex-direction' a partir do código acima.

#container {
    display: flex;
    flex-direction: row;     /* make main axis horizontal (default setting) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center;     /* center items vertically, in this case */
    height: 300px;
}

[**DEMO***](http://jsfiddle.net/8o29y7pd/3/)

Centrar o conteúdo dos itens flexíveis

O alcance de um contexto de formatação flex é limitado a uma relação pai-filho. Os descendentes de um recipiente flex além das crianças não participam do layout flex e ignorarão as propriedades flex. Essencialmente, as propriedades flex não são herdáveis para além das crianças.

Portanto, você sempre precisará aplicar display: flex ou display: inline-flex a um elemento dos pais para aplicar propriedades flex à criança.

Para centrar verticalmente e/ou horizontalmente o texto ou outro conteúdo contido em um item flex, faça do item um container flex (aninhado), e repita as regras de centralização.

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* for single line flex container */
    align-content: center;      /* for multi-line flex container */
}

Mais detalhes aqui: https://stackoverflow.com/q/25311541/3597276

Alternativamente, você pode aplicar margin: auto ao elemento de conteúdo do item flex.

p { margin: auto; }

Saiba mais sobre as margens flex auto aqui: Métodos para Alinhar Itens Flex (ver caixa#56).

Centrando múltiplas linhas de itens flexíveis

Quando um recipiente flexível tem múltiplas linhas (devido ao enrolamento) a propriedade "conteúdo de alinhamento" será necessária para o alinhamento entre eixos.

Das especificações:

[8.4. Embalagem de Linhas Flex: o `alinhamento-conteúdo'; [8.4. propriedade**](https://www.w3.org/TR/css-flexbox-1/#align-content-property)

A propriedade `align-content' alinha as linhas de um recipiente flexível dentro do recipiente flexível quando há espaço extra no eixo cruzado, semelhante a como "justificar o conteúdo" alinha os itens individuais dentro do eixo principal. Note, esta propriedade não tem efeito sobre um contentor flexível de uma única linha.

Mais detalhes aqui: https://stackoverflow.com/q/42613359/3597276

Suporte do navegador

Flexbox é suportado por todos os principais navegadores, exceto IE < 10. Algumas versões recentes de navegadores, como Safari 8 e IE10, requerem prefixos do fornecedor. Para uma forma rápida de adicionar prefixos use Autoprefixer. Mais detalhes em esta resposta.

Solução centralizadora para navegadores mais antigos

Para uma solução alternativa de centralização usando tabela CSS e propriedades de posicionamento veja esta resposta: https://stackoverflow.com/a/31977476/3597276

Don'não se esqueça de usar atributos específicos de navegadores importantes:

align-items: centro; -->

-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

justificar-conteúdo: centro; -->

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Você poderia ler estes dois links para melhor entender flex: http://css-tricks.com/almanac/properties/j/justify-content/ e http://ptb2.me/flexbox/

Boa sorte.