CSS: Como alinhar verticalmente um “rótulo” e “entrada” dentro de um “div”?

Considere o seguinte código :

HTML:

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

CSS:

div {
    height: 50px;
    border: 1px solid blue;
}

Qual seria o método mais fácil de colocar o labele o inputno meio do div(verticalmente)?

div {
    display: table-cell;
    vertical-align: middle;
    height: 50px;
    border: 1px solid red;
}

<div>
    <label for='name'>Name:</label>
    <input type='text' id='name' />
</div>

As vantagens deste método são que você pode alterar a altura do div, alterar a altura do campo de texto e alterar o tamanho da fonte e tudo ficará sempre no meio.

http://jsfiddle.net/53ALd/6/

uma abordagem mais moderna seria usar css flex-box.

div {
  height: 50px;
  background: grey;
  display: flex;
  align-items: center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

um exemplo mais complexo ... se você tiver vários elementos no fluxo flexível, você pode usar o alinhamento próprio para alinhar elementos únicos de maneira diferente do alinhamento especificado ...

div {
  display: flex;
  align-items: center
}

* {
  margin: 10px
}

label {
  align-self: flex-start
}

<div>
  <img src="https://de.gravatar.com/userimage/95932142/195b7f5651ad2d4662c3c0e0dccd003b.png?size=50" />
  <label>Text</label>
  <input placeholder="Text" type="text" />
</div>

também é super fácil de centralizar horizontal e verticalmente:

div {
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background: grey;
  display: flex;
  align-items: center;
  justify-content:center
}

<div>
  <label for='name'>Name:</label>
  <input type='text' id='name' />
</div>

Isso funciona em vários navegadores, fornece mais acessibilidade e vem com menos marcação. vala o div. Embrulhe o rótulo

label{
     display: block; 
     height: 35px; 
     line-height: 35px; 
     border: 1px solid #000; 
}

input{margin-top:15px; height:20px}

<label for="name">Name: <input type="text" id="name" /></label>

Estou ciente de que essa pergunta foi feita há mais de dois anos, mas para qualquer espectador recente, aqui está uma solução alternativa, que tem algumas vantagens sobre a solução de Marc-François:

div {
    height: 50px;
    border: 1px solid blue;
    line-height: 50px;
}

Aqui, simplesmente adicionamos um line-heightigual à altura do div. A vantagem é que agora você pode alterar a propriedade de exibição da div conforme desejar, para, inline-blockpor exemplo, e seu conteúdo permanecerá centralizado verticalmente. A solução aceita requer que você trate o div como uma célula de tabela. Isso deve funcionar perfeitamente, em vários navegadores.

A única outra vantagem é que é apenas mais uma regra CSS em vez de duas :)

Felicidades!

Use paddingna div( superior e inferior ) e vertical-align:middlena labele input.

exemplo em http://jsfiddle.net/VLFeV/1/

Envolva o rótulo e insira em outro div com uma altura definida. Isso pode não funcionar em versões do IE anteriores a 8.

position:absolute; 
top:0; bottom:0; left:0; right:0;
margin:auto;

Você pode usar a display: table-cellpropriedade como no seguinte código:

div {
     height: 100%;
     display: table-cell; 
     vertical-align: middle;
    }