标签：
方法一：通过行高（line-height）定位
line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器高度也设为500px，就可以实现这行文字垂直居中，这样做的缺点是如果内容过多，文字就跑到了下一行，就不是居中了，所以限制较多。
具体代码：
<html> <head> <style> body { margin: 0; padding: 0; background: #1d1d1d; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } h1 { font: 3em Georgia, "Times New Roman", Times, serif; color: #fff; height: 500px; line-height: 500px; text-align:center; border: 10px solid #999; } </style> </head> <body> <h1>Hi, I‘m<span>Vertically Aligned</span></h1> </body> </html>
方法二：通过绝对定位布局进行布局
基本的思路是，获取元素的高h和宽w，然后找到页面的中心点（x，y），在css中控制元素margin的上为-h/2，左为-w/2。而这样做的局限则是，该页面元素必须是块状元素，必须指定高和宽，而且如果在其中放置动态元素，结果可能会很糟糕。
具体代码：
<html> <head> <style> .vert { width: 580px; height: 190px; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -290px; } </style> </head> <body> <div class="vert"> <h1>Hi, I‘m<span>Vertically Aligned</span></h1> <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p> </div> </body> </html>
在方法二的基础上扩充一下，如果需要让其在父元素中垂直居中呢？其实不难，只要将其父元素采用相对定位，设置高和宽，就可以了，这样子元素的定位的原点就是相对与父元素的左上角，而不是页面的左上角了。
具体代码：
<html> <head> <style> .vert { width: 580px; height: 190px; position: absolute; top: 50%; left: 50%; margin: -95px 0 0 -290px; } .container { position: relative; height: 500px; width: 800px; border: 10px solid #999; background: #F00; margin: 20px; } </style> </head> <body> <div class="container"> <div class="vert"> <h1>Hi, I‘m Nested &<span>Vertically Aligned</span></h1> <p>Abigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis <strong>Using</strong> augue <strong>absolute</strong> validus. Regula <strong>positioning</strong> eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. </p> </div> </div> </body> </html>
标签：
原文地址：http://www.cnblogs.com/ScorchingSun/p/4305904.html
