html - vertically - flexbox horizontal alignment




Flexbox: centre horizontalmente e verticalmente (7)

Como centralizar elementos vertical 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 ).

Em ambos os casos, a altura dos divs centrados pode ser variável, indefinida, desconhecida, qualquer que seja. A altura dos divs centrados 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 itens flexíveis são empilhados horizontalmente:

Ajuste a regra de flex-direction 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íveis

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

Portanto, você sempre precisará aplicar display: flex ou display: inline-flex para um elemento pai para aplicar propriedades flex no 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 um flexbox?

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

p { margin: auto; }

Saiba mais sobre auto margens auto flex aqui: Métodos para alinhar itens do Flex (consulte o quadro # 56).

Centralizando várias linhas de itens flexíveis

Quando um contêiner flexível tiver várias linhas (devido ao agrupamento), a propriedade align-content será necessária para o alinhamento de eixos cruzados.

A partir da especificação:

8.4. Empacotando Linhas Flexíveis: a propriedade align-content

A propriedade align-content alinha as linhas de um contêiner flexível no contêiner flexível quando há espaço extra no eixo cruzado, semelhante a como justify-content alinha 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 alinhamento, alinhamento de itens e alinhamento de conteúdo?

Suporte de Navegador

O Flexbox é suportado por todos os principais navegadores, exceto o IE <10 . Algumas versões recentes de navegadores, 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 mais antigos

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

Como centralizar div horizontalmente e verticalmente dentro do contêiner usando flexbox. No exemplo abaixo, quero cada número abaixo um do outro (em linhas), que estão centralizados 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


Se você precisar centralizar um texto em um link, isso fará o seguinte:

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>


Adicionar

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

para o elemento recipiente de qualquer coisa que você queira centralizar. Documentação: justify-content e align-items .


Eu acho que você quer algo parecido com 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 elementos .flex-item devem ter nível de bloco ( div invés de span ) se você quiser que a altura e o preenchimento de topo / base funcionem corretamente.

Além disso, em .row , defina a largura como auto vez de 100% .

Suas .flex-container estão bem.

Se você quiser que o .row seja centralizado verticalmente na porta de visualização, atribua 100% de altura ao html e ao body , e também zere as margens do body .

Observe que o .flex-container precisa de uma altura para ver o efeito de 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 exibição neste exemplo.

Nota de rodapé:
As propriedades flex-flow , flex-direction e flex-wrap poderiam ter facilitado a implementação deste design. Eu acho que o contêiner .row 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/


Usando CSS +

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

dê uma olhada HERE


diplay: flex; para o container e margin:auto; pois o item funciona perfeito.

NOTA: Você precisa configurar a width e a height para 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>


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




flexbox