alinhamento vertical no meio em <div>

Quero manter a altura de #abc divem 50pxe o texto para alinhar verticalmente no meio do div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Você pode usar line-height: 50px;, você não precisará de vertical-align: middle;lá.

Demo

O exemplo acima falhará se você tiver várias linhas, portanto, nesse caso, você pode agrupar seu texto usando spane depois usar display: table-cell;e display: table;junto com vertical-align: middle;, além disso, não se esqueça de usar width: 100%;para#abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

Outra solução que posso pensar aqui é usar a transformpropriedade translateY()onde, Yobviamente, significa Y Axis. É bem simples ... Tudo o que você precisa fazer é definir a posição dos elementos para absolutee depois posicionar 50%a toppartir do eixo e traduzir com o eixo negativo-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Observe que isso não será suportado em navegadores mais antigos, por exemplo, o IE8, mas você pode criar o IE9 e outras versões mais antigas do navegador Chrome e Firefox usando -ms, -moze -webkitprefixos, respectivamente.

Para mais informações transform, você pode consultar aqui .

É simples: dê ao pai o seguinte:

display: table;

e dê à criança div (s) o seguinte:

display: table-cell;
vertical-align: middle;

É isso aí!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Pergunta antiga, mas atualmente o CSS3 torna o alinhamento vertical realmente simples !

Basta adicionar ao #abcseguinte css:

display:flex;
align-items:center;

Demonstração simples

Demonstração da pergunta original atualizada

Exemplo simples:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Encontrei esta solução por Sebastian Ekström. É rápido, sujo e funciona muito bem. Mesmo se você não souber a altura dos pais:

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Leia o artigo completo aqui .

Você pode usar a altura da linha maior que a altura da div. Mas para mim a melhor solução é esta ->position:relative; top:50%; transform:translate(0,50%);

Que tal adicionar line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Violino, altura da linha

Ou por paddingdiante #abc. Este é o resultado com preenchimento

Atualizar

Adicione no seu css:

#abc img{
   vertical-align: middle;
}

O resultado . Espero que seja o que você está procurando.

Tente o seguinte:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Outro método para centralizar uma div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Use a propriedade translateY CSS para centralizar verticalmente o texto no contêiner

<style>
.centertext{

    position: relative;
    top: 50%;
    transform: translateY(40%);

}
</style>

E depois aplique-o ao seu DIV contendo

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Ajuste a porcentagem de tradução para atender às suas necessidades. Espero que isto ajude

Este código é para o alinhamento vertical central e horizontal central, sem especificar a altura fixa:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}