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>

这种方法的优点是你可以改变div的高度，改变文本字段的高度和改变字体大小，所有的东西都将永远停留在中间。
http://jsfiddle.net/53ALd/6/

更现代的方法是使用CSS flexbox：

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

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

一个更复杂的例子：如果弹性流中有多个元素，则可以使用align-self将单个元素与指定的对齐方式不同地对齐。
一个二个一个一个
水平和垂直居中也非常容易：

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>

这可以跨浏览器工作，提供了更多的可访问性，并且带有更少的标记。ditch the div. Wrap the label

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>

我知道这个问题在两年前就被问到了，但是对于任何最近的观众来说，这里有一个替代的解决方案，它比马克-弗朗索瓦的解决方案有一些优点：

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

这里我们只添加了一个等于div高度的line-height。优点是你现在可以改变div的显示属性，比如inline-block，它的内容将保持垂直居中。公认的解决方案要求你把div当作一个表格单元格。这应该可以很好地工作，跨浏览器。
唯一的另一个优点是它只是多了一个CSS规则，而不是两个：）
干杯!

在div（* 顶部和底部 *）上使用padding，在label和input上使用vertical-align:middle。
http://jsfiddle.net/VLFeV/1/处的示例

在另一个定义高度的div中换行标签和输入。这在低于8的IE版本中可能不起作用。

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

可以按以下代码所示使用display: table-cell属性：

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