vertical - html centralizar horizontal




Alinhamento vertical de CSS: meio que não funciona (10)

É simples. Basta adicionar display:table-cell na sua classe principal.

.main {
  height: 72px;
  vertical-align: middle;
  display:table-cell;
  border: 1px solid #000000;
}

Confira este jsfiddle !

Eu estou tentando centralizar verticalmente um span ou elemento div dentro de outro elemento div . No entanto, quando eu coloco vertical-align: middle , nada acontece. Eu tentei alterar as propriedades de display de ambos os elementos e nada parece funcionar.

Isso é o que estou fazendo atualmente na minha página da Web:

.main {
  height: 72px;
  vertical-align: middle;
  border: 1px solid black;
  padding: 2px;
}
    
.inner {
  vertical-align: middle;
  border: 1px solid red;    
}
    
.second {
  border: 1px solid blue; 
}
<div class="main">
  <div class="inner">
    This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Aqui está um jsfiddle da implementação mostrando que ele não funciona: http://jsfiddle.net/gZXWC/


Aqui está a última solução mais simples - não é necessário alterar nada, apenas adicione três linhas de regras CSS ao seu contêiner da div onde você deseja se concentrar. Eu amo Flex Box #LoveFlexBox

.main {
  /* I changed height to 200px to make it easy to see the alignment. */
  height: 200px;
  vertical-align: middle;
  border: 1px solid #000000;
  padding: 2px;
  
  /* Just add the following three rules to the container of which you want to center at. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* This is true vertical center, no math needed. */
}
.inner {
  border: 1px solid #000000;
}
.second {
  border: 1px solid #000000;
}
<div class="main">
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
  <div class="inner">This box should be centered in the larger box
    <div class="second">Another box in here</div>
  </div>
</div>

Bônus

o valor justify-content pode ser definido para as seguintes poucas opções:

  • flex-start , que alinhará o filho div para onde o fluxo flexível começa em seu contêiner pai. Neste caso, ele ficará no topo.

  • center , que alinhará o div filho ao centro de seu contêiner pai. Isso é realmente interessante, porque você não precisa adicionar um div adicional para envolver todos os filhos para colocar o wrapper em um contêiner pai para centralizar os filhos. Por causa disso, este é o verdadeiro centro vertical (na flex-direction da column . Da mesma forma, se você alterar a flow-direction para row , ele será centrado horizontalmente.

  • flex-end , que alinhará o filho div a onde o fluxo flexível termina em seu contêiner pai. Neste caso, ele irá para o fundo.

  • space-between , que vai espalhar todas as crianças desde o início do fluxo até o final do fluxo. Se a demonstração, eu adicionei outro filho div, para mostrar que eles estão espalhados.

  • space-around , semelhante ao space-between , mas com metade do espaço no início e no final do fluxo.


Basta colocar o conteúdo dentro de uma tabela com altura de 100% e definir a altura para o div principal

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
  This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Caso você não possa confiar no flexbox ... Coloque .child no centro do .parent . Funciona quando os tamanhos de pixel são desconhecidos (em outras palavras, sempre) e não há problemas com o IE9 + também.

.parent { position: relative; }

.child {
    position: absolute;
    top : 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform    : translate(-50%, -50%);    
}
<div class="parent" style="background:lightyellow; padding:6em"> 
  <div class="child" style="background:gold; padding:1em">&mdash;</div> 
</div>



Este parece ser o melhor caminho - algum tempo se passou desde o meu post original e é isso que deve ser feito agora: http://jsfiddle.net/m3ykdyds/200

/* CSS file */

.main {
    display: table;
}

.inner {
    border: 1px solid #000000;
    display: table-cell;
    vertical-align: middle;
}

/* HTML File */
<div class="main">
    <div class="inner"> This </div>
</div>

Você também pode usar o seguinte:

Usando CSS3:

<!-- HTML -->
<div class="wrapper">
   <div>Hi</div>
</div>

/* CSS */
.wrapper {
  display : flex;
  align-items : center;
}

Para centralizar verticalmente um span ou elemento div dentro de outro div, adicione a posição relativa ao div pai e a posição absoluta ao div filho.Agora, o div filho pode ser posicionado em qualquer lugar dentro do div.Exemplo abaixo centraliza-se horizontalmente e verticalmente.

<div class="parent"> <div class="child">Vertically and horizontally centered child div</div> </div>

css:

.parent{position:relative;}
.child{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}

Tente isso, funciona muito bem para mim:

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

Você deve colocar o vertical-align: middle no elemento interno, não no elemento externo. Defina a propriedade de line-height da line-height no elemento externo para corresponder à height do elemento externo. Em seguida, defina a display: inline-block e line-height: normal no elemento interno. Ao fazer isso, o texto no elemento interno será agrupado com uma altura de linha normal. Funciona no Chrome, Firefox, Safari e IE 8 ou superior

HTML

<div class="main">
    <div class="inner">Vertically centered text</div>
</div>

CSS

.main {
    height: 72px;
    line-height:72px;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

Fiddle


aqui é um ótimo artigo de como alinhar vetical .. Eu gosto do modo de flutuar.

http://www.vanseodesign.com/css/vertical-centering/

O HTML:

<div id="main">
    <div id="floater"></div>
    <div id="inner">Content here</div>
</div>

E o estilo correspondente:

#main {
   height: 250px;
}

#floater {
   float: left;
   height: 50%;
   width: 100%;
   margin-bottom: -50px;
}

#inner {
   clear: both;
   height: 100px;
}






css