CSS: ¿Cómo alinear verticalmente una "etiqueta" y una "entrada" dentro de un "div"?

Considere el siguiente código :

HTML:

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

CSS:

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

¿Cuál sería el método más fácil para poner labely inputen el medio de 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>

Las ventajas de este método es que puedes cambiar la altura del div, cambiar la altura del campo de texto y cambiar el tamaño de la fuente y todo quedará siempre en el medio.

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

un enfoque más moderno sería 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>

un ejemplo más complejo ... si tiene varios elementos en el flujo flexible, puede usar align-self para alinear elementos individuales de manera diferente a la alineación especificada ...

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>

también es muy fácil de centrar horizontal y 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>

Esto funciona en varios navegadores, proporciona más accesibilidad y viene con menos marcado. deshacerse del div. Envuelva la etiqueta

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>

Soy consciente de que esta pregunta se hizo hace más de dos años, pero para cualquier espectador reciente, aquí hay una solución alternativa, que tiene algunas ventajas sobre la solución de Marc-François:

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

Aquí simplemente solo agregamos un line-heightigual a la altura del div. La ventaja es que ahora puede cambiar la propiedad de visualización del div como mejor le parezca, inline-blockpor ejemplo, y su contenido permanecerá centrado verticalmente. La solución aceptada requiere que trate el div como una celda de tabla. Esto debería funcionar perfectamente en varios navegadores.

La única otra ventaja es que es solo una regla CSS más en lugar de dos :)

¡Salud!

Úselo paddingen el div( superior e inferior ) y vertical-align:middleen el labely input.

ejemplo en http://jsfiddle.net/VLFeV/1/

Envuelva la etiqueta e ingrese en otro div con una altura definida. Es posible que esto no funcione en versiones de IE inferiores a 8.

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

Puede usar la display: table-cellpropiedad como en el siguiente código:

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