垂直居中的两种实现方法
http://www.flatws.cn/article/program/css/2011-04-24/22575.html
方法一：利用行高（line-height）定位
line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器的高度也为500px，同样可以实现垂直居中，但是用它来实现垂直居中，也是有缺点的，就是如果内容过多，文字就会跑到下一行，那么内容就不可能垂直居中了。
HTML代码：
<h1>Hi,I'm<span>VerticallyAligned</span>WithintheH1</h1>
CSS代码：
body{
margin:0;
padding:0;
background:#1d1d1d;
font-size:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
h1{
font:3emGeorgia,"TimesNewRoman",Times,serif;
color:#fff;
height:500px;
line-height:500px;
text-align:center;
border:10pxsolid#999;
}
h1span{
font-weight:bold;
font-size:1.5em;
color:#fff000;
}
p{
font-size:1.3em;
color:#999;
}
strong{
color:#fff;
}
方法二：利用绝对定位
先来看看效果，查看演示
这个方法有个缺点我必须指出，就是外面的块状元素，必须指定高度，所以如果你在里面放动态的内容的话，后果会很糟糕滴~
HTML代码：
<divclass="vert">
<h1>Hi,I'm<span>VerticallyAligned</span></h1>
<p>Abigosudomarapaulatimodio,accumsanluptatumnibhnibhreferometuoopesutfatua.Acsietferesimilis<strong>Using</strong>augue<strong>absolute</strong>validus.Regula<strong>positioning</strong>eujusvel,indolesfereiaceoeasimilis.Velitpraemittonullavelluctussecundum.</p>
</div>
CSS代码
这种用绝对定位来实现的垂直居中，取决与元素的宽度和高度，你可以用下面这两个公式来计算元素的左边距和上边距
元素的宽度/2=负左边距
元素的高度/2=负上边距
在这个例子中，我们就是这么计算的
.vert{
width:580px;
height:190px;
position:absolute;
top:50%;
left:50%;
margin:-95px00-290px;
}
完整CSS代码
body{
margin:0;
padding:0;
background:#1d1d1d;
font-size:10px;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
h1{
font:4emGeorgia,"TimesNewRoman",Times,serif;
color:#fff;
border-bottom:5pxdotted#999;
margin:0;
padding:0010px;
}
h1span{
font-weight:bold;
display:block;
font-size:1.5em;
color:#fff000;
}
p{
font-size:1.3em;
color:#999;
}
strong{
color:#fff;
}
.vert{
width:580px;
height:190px;
position:absolute;
top:50%;
left:50%;
margin:-95px00-290px;
}
问题延伸
如果元素的外面还有一个父级元素，如果才能让元素垂直居中于父级元素内部？比如下面的代码，多了一个父级元素
<divclass="container">
<divclass="vert">
<h1>Hi,I'mNested&<span>VerticallyAligned</span></h1>
<p>Abigosudomarapaulatimodio,accumsanluptatumnibhnibhreferometuoopesutfatua.Acsietferesimilis<strong>Using</strong>augue<strong>absolute</strong>validus.Regula<strong>positioning</strong>eujusvel,indolesfereiaceoeasimilis.Velitpraemittonullavelluctussecundum.</p>
</div>
</div>
这时候，就必须在定义父级元素的CSS代码中加入position:relative;才能够使内部元素垂直居中于父级内部，代码如下：
.container{
position:relative;
height:500px;
width:800px;
border:10pxsolid#999;
background:#000;
margin:20px;
}