CSS：如何在“ div”内垂直对齐“标签”和“输入”？

考虑以下代码：

HTML：

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

CSS：

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

将label和放在（垂直）input中间的最简单方法是div什么？

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 flex-box。

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

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

一个更复杂的示例...如果flex流中有多个元素，则可以使用align-self来将单个元素与指定的align不同地对齐...

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>

它也很容易在水平和垂直方向上居中：

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>

这可以跨浏览器工作，提供更多的可访问性，并且标记更少。抛弃股利。包装标签

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>

我知道这个问题是两年多以前提出的，但是对于任何最近的观众来说，这是一个替代解决方案，它比Marc-François的解决方案具有一些优势：

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

在这里，我们仅添加line-height等于div高度的值。好处是您现在可以根据需要将div的display属性更改为inline-block为例如，并且其内容将保持垂直居中。接受的解决方案要求您将div视为表单元格。跨浏览器应该可以正常工作。

唯一的其他优点是，它只是一个CSS规则，而不是两个:)

干杯!

使用padding上div（顶部和底部），并vertical-align:middle在label与input。

http://jsfiddle.net/VLFeV/1/的示例

包装标签，然后在另一个div中输入已定义的高度。在低于8的IE版本中，这可能不起作用。

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

您可以display: table-cell像下面的代码中那样使用property：

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