Flexbox: centralize horizontalmente e verticalmente

Como centralizar a div horizontalmente e verticalmente dentro do contêiner usando o flexbox. No exemplo abaixo, quero cada número abaixo um do outro (em linhas), centralizado horizontalmente.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

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

http://codepen.io/anon/pen/zLxBo

Eu 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>

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

Seus .flex-itemelementos devem estar no nível do bloco (em divvez de span) se você quiser que a altura e o preenchimento superior / inferior funcionem corretamente.

Além disso, .rowative a largura para em autovez de 100%.

Suas .flex-containerpropriedades estão bem.

Se você deseja que o .rowser centrado verticalmente no porto vista, atribuir altura de 100% a htmle body, e também de zero as bodymargens.

Observe que .flex-containerprecisa de uma altura para ver o efeito do alinhamento vertical; caso contrário, o contêiner calcula a altura mínima necessária para incluir o conteúdo, que é menor que a altura da porta de visualização neste exemplo.

Nota de rodapé:
A flex-flow, flex-direction, flex-wrappropriedades poderia ter feito este projeto mais fácil de implementar. Eu acho que o .rowcontêiner não é necessário, a menos que você queira adicionar algum estilo ao redor dos elementos (imagem de plano 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 gerais de centralização.

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

Nos dois casos, a altura dos divs centralizados pode ser variável, indefinida, desconhecida, qualquer que seja. A altura dos divs centralizados não importa.

Aqui está o HTML para ambos:

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <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

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

Ajuste a flex-directionregra 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

Centralizando o conteúdo dos itens flex

O escopo de um contexto de formatação flexível é limitado a um relacionamento pai-filho. Descendentes de um contêiner flex além dos filhos não participam do layout flex e ignoram as propriedades flex. Essencialmente, as propriedades flexíveis não são herdáveis ​​além dos filhos.

Portanto, você sempre precisará aplicar display: flexoudisplay: inline-flex a um elemento pai para aplicar propriedades flexíveis ao filho.

Para centralizar verticalmente e / ou horizontalmente o texto ou outro conteúdo contido em um item flexível, torne o item um contêiner flexível (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: Como alinhar verticalmente o texto dentro de uma caixa flexível?

Como alternativa, você pode aplicar margin: autoao elemento de conteúdo do item flexível.

p { margin: auto; }

Aprenda sobre automargens flexíveis aqui: Métodos para alinhar itens flexíveis (na caixa nº 56).

Centralizando várias linhas de itens flexíveis

Quando um contêiner flexível possui várias linhas (devido ao empacotamento), a align-contentpropriedade será necessária para o alinhamento entre eixos.

Das especificações:

8.4 Embalagem Flex Lines: a align-content propriedade

A align-contentpropriedade alinha as linhas de um contêiner flexível dentro do contêiner flexível quando houver espaço extra no eixo transversal, semelhante à forma como justify-contentalinha itens individuais no eixo principal. Observe que essa propriedade não tem efeito em um contêiner flexível de linha única.

Mais detalhes aqui: Como o flex-wrap funciona com alinhar-se, alinhar itens e alinhar conteúdo?

Suporte do navegador

O Flexbox é suportado por todos os principais navegadores, exceto o IE <10 . Algumas versões recentes do navegador, como o Safari 8 e o IE10, exigem prefixos de fornecedores . Para uma maneira rápida de adicionar prefixos, use o Autoprefixer . Mais detalhes nesta resposta .

Solução de centralização para navegadores antigos

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

Adicionar

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

para o elemento contêiner do que você deseja centralizar. Documentação: justificar conteúdo e alinhar itens .

Não se esqueça de usar atributos específicos de navegadores importantes:

alinhar itens: 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ê pode ler estes dois links para entender melhor o flex: http://css-tricks.com/almanac/properties/j/justify-content/ e http://ptb2.me/flexbox/

Boa sorte.

1 - Defina CSS no div pai como display: flex;

2 - Defina CSS na div pai como flex-direction: column;
Note que isso fará com que todo o conteúdo dessa div fique alinhado de cima para baixo. Isso funcionará melhor se a div pai contiver apenas o filho e nada mais.

3 - Defina CSS no div pai como justify-content: center;

Aqui está um exemplo de como o CSS será:

.parentDivClass {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Você pode fazer uso de

display: flex; align-items: center; justify-content: center;

no seu componente pai

https://repl.it/repls/TomatoImaginaryInitialization

diplay: flex;por seu contêiner e margin:auto;por seu item, funciona perfeitamente.

NOTA: Você precisa configurar o widthe heightpara ver o efeito.

#container{
  width: 100%; /*width needs to be setup*/
  height: 150px; /*height needs to be setup*/
  display: flex;
}

.item{
  margin: auto; /*These will make the item in center*/
  background-color: #CCC;
}

<div id="container">
   <div class="item">CENTER</div>
</div>

Se você precisar centralizar um texto em um link, isso funcionará:

div {
  display: flex;

  width: 200px;
  height: 80px;
  background-color: yellow;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* only important for multiple lines */

  padding: 0 20px;
  background-color: silver;
  border: 2px solid blue;
}

<div>
  <a href="#">text</a>
  <a href="#">text with two lines</a>
</div>

margin: autofunciona perfeitamente com o flexbox. Centraliza verticalmente e horizontalmente.

html, body {
  height: 100%;
  max-height: 100%;
}

.flex-container {
  display: flex;
    
  height: 100%;
  background-color: green;
}

.container {
  display: flex;
  margin: auto;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS</title>
</head>
<body>
  <div class="flex-container">
    <div class="container">
      <div class="row">
        <span class="flex-item">1</span>
      </div>
      <div class="row">
        <span class="flex-item">2</span>
      </div>
      <div class="row">
        <span class="flex-item">3</span>
      </div>
     <div class="row">
        <span class="flex-item">4</span>
    </div>
  </div>  
</div>
</body>
</html>

RESULTADO:

CÓDIGO

HTML:

<div class="flex-container">
  <div class="rows">

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

  </div>  
</div>

CSS:

html, body {
  height: 100%;  
}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.rows {
  display: flex;
  flex-direction: column;
}

onde flex-containerdiv é usado para centralizar vertical e horizontalmente sua rowsdiv, e rowsdiv é usada para agrupar seus "itens" e ordená-los em uma coluna.

    .flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

Usando CSS +

<div class="EXTENDER">
  <div class="PADDER-CENTER">
    <div contentEditable="true">Edit this text...</div>
  </div>
</div>

dê uma olhada AQUI