SOURCE

<div id="wrap">
  <div id="content">
			我是第一行 <br/>
			我是第二行 <br/>
			我是第三行 <br/>
			我是第四行 <br/>
  </div>
</div>
<span>
  CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，例如表格元素中的"td"、"th"、"caption"等，而像"div"、"span"这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。
</span>
<br>
<span>
  但是在CSS中还有一个display属性能够模拟"table"，所以我们可以使用这个属性来让"div"模拟"table"就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个"div"元素：
</span>
<p>
  这个方法应该是很理想了，但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell，因此这种方法在Internet
  Explorer 6及以下的版本中是无效的。嗯，这让人很郁闷！不过我们还其它的办法。
</p>

body {
  font-size: 12px;
  font-family: tahoma;
}

div#wrap {
  height: 400px;
  display: table;
}

div#content {
  vertical-align: middle;
  display: table-cell;
  border: 1px solid #FF0099;
  background-color: #FFCCFF;
  width: 760px;
}

span {
  font-size: 21px;
  color: rgb(255, 0, 0);
}

p {
  font-size: 21px;
  color: green
}