HTML代码：
<h1>Hi, I'm<span>Vertically Aligned</span>Within the H1</h1>
CSS代码：
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
}
h1 span {
font-weight: bold
font-size:1.5em
color: #fff000
}
p {
font-size: 1.3em
color: #999
}
strong {
color: #fff
}
方法二：利用绝对定位
这个方法有个缺点我必须指出，就是外面的块状元素，必须指定高度，所以如果你在里面放动态的内容的话，后果会很糟糕滴~
HTML代码：
<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>
CSS代码
这种用绝对定位来实现的垂直居中，取决与元素的宽度和高度，你可以用下面这两个公式来计算元素的左边距和上边距
元素的宽度/2 = 负左边距
元素的高度/2 = 负上边距
在这个例子中，我们就是这么计算的
.vert {
width: 580px
height: 190px
position: absolute
top: 50%
left: 50%
margin: -95px 0 0 -290px
}
完整CSS代码
body {
margin: 0
padding: 0
background: #1d1d1d
font-size: 10px
font-family: Verdana, Arial, Helvetica, sans-serif
}
h1 {
font: 4em Georgia, "Times New Roman", Times, serif
color: #fff
border-bottom: 5px dotted #999
margin: 0
padding: 0 0 10px
}
h1 span {
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: -95px 0 0 -290px
}
问题延伸
如果元素的外面还有一个父级元素，如果才能让元素垂直居中于父级元素内部？比如下面的代码，多了一个父级元素
<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>
这时候，就必须在定义父级元素的CSS代码中加入position: relative才能够使内部元素垂直居中于父级内部，代码如下：
.container {
position: relative
height: 500px
width: 800px
border: 10px solid #999
background: #000
margin: 20px
}
一、CSS简介CSS(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言，之前提到的W3C规范中的“样式”。作用：1、美化界面。2、页面布局。基本语法：选择器{样式规则}样式规则：属性名1：属性值1属性名2：属性值2属性名3：属性值3。。。选择器:是用来选择标签的，选出来以后给标签加样式。从Hello World说起，<p style="background-color:#FFFcolor:#000font-size:30px">Hello World!</p>这样写可以实现将原本的白底黑字Hello World! 改成样式为 黑底白字的效果。但是这样写有一定的缺点：缺点1：内容、样式、行为三者未分离，代码糅杂，不符合W3C规范，难以维护。缺点2：代码冗余，不可复用。二、如何引入CSS？1）行内样式即上述的一般形式，由于其存在的缺点，介绍下一种样式。2）内嵌样式，给p标签加样式，加在head标签中<style type="text/css">p{background-color:#FFFcolor:#000font-size:30px}</style>当本页面的p标签都需要相同的样式时，这样写大大降低了代码量，并让其他编程人员一眼分辨出来CSS样式。3）链接样式（链入式）在head标签中加入<link href="../css/my.css" type="text/css" rel="stylesheet"/>将CSS文件和html文件分开来放，这样增加了代码的重用性，但是每个浏览器都要单独读取css文件中的样式，比较慢，如果追求速度，内嵌样式会更好。4）导入样式<style type="text/css">@import url("路径名")</style>四种样式的优先级：如果一个页面中四种样式同时存在，这四种都会对标签起作用，但是重复样式的属性值，只有最后一个有效。如果内嵌样式和导入样式放在一起，则内嵌样式起作用。如果内嵌样式和导入样式分成两个style定义，则在CSS样式中的最后一个style起作用。附：css中注释的格式，没有单行注释，所有的注释均是/*注释内容*/
