1、OS意思是操作系统，时OperatingSystem的简写，指操作系统（计算机管理控制程序）。
.Container {position: absolute
top: 50%/*把块的顶边定义在浏览器的中线上（此时并未居中）*/
left: 2px
width: 352px
height: 600px
border-left: 1px dotted #CCCCCC
border-right: 1px dotted #CCCCCC
margin-top: -300px/*把块的一半移动到中线以上实现居中*/
}
.Scroller-Container {
background-color: #EEE
height: 140px/*必须定义一个高度否则无法实现居中*/
position: absolute/*此时的包含块是已经居中的Scroller-1，因为它是与Scroller-Container最近的定位的父元素，所以Scroller-Container得根据它来定位。Scroller-1已经居中很简单，是因为嵌套在Container中，且尺寸与Container一致。*/
top: 50%/*把块的顶边定义在Scroller-1的中线上（此时并未居中）*/
margin-top: -70px/*把块的一半移动到中线以上实现居中*/
}
简单说一下实现原理：要垂直居中，必须具备两个条件：一元素必须用定位使顶边定义在中线上；二元素必须有固定的高度，以便用负边距移动元素实现居中。
提点建议，其实兄弟你嵌套这么多层没有什么意义，像Scroller-1层和Scroller-Container 层完全可以去掉。
结构如下：
<body>
<div class="Container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo ligula enim ac justo. Pellentesque id ligula. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac habitasse platea dictumst. Integer ipsum risus, sagittis ac, imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue, urna eget hendrerit elementum, dolor ligula ultrices neque, in elementum ante erat et elit.</p>
</div>
<div id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div>
</div>
</div>
</body>
CSS代码：
.Container {
position: absolute
top: 50%
left: 2px
width: 352px
height: 600px
border-left: 1px dotted #CCCCCC
border-right: 1px dotted #CCCCCC
margin-top: -300px
}
p {
font-size: 11px
text-indent: 20px
color: #777
background-color: #EEE
height: 180px
margin-top: -90px
position: absolute
top: 50%
}
其他不变就可以垂直居中了，也许你有你的目的吧，希望能帮到你。
以下是我修改的不固定高度的内容垂直居中代码：
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh
-CN">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>垂直居中</title>
<style type="text/css">
body, html { height:100%}
.Container { height:100%width: 352pxoverflow:visible
position:relative}
.Container[class] { display:tableposition:static}
#Scroller-1 { position:absolutetop:50%}
#Scroller-1[id] { display:table-cellvertical-align:middle
position:static}
.Scroller-Container { position:relativetop:-50%background-color:
#EEE}
.Scroller-Container[class] { position:static}
#Scroller-1 p {
margin: 0
font-size: 11px
text-indent: 20px
color: #777
}
.Scrollbar-Track {
width: 9pxheight: 600px
position: absolute
top: 0pxleft: 686px
background-color: #EEE
}
.Scrollbar-Handle {
position: absolute
top: 0pxleft: 0px
width: 9pxheight: 82px
background-image:url(scroll.jpg)
cursor: pointer
}
.Scrollbar-Handle:active {
background-image:url(scroll2.jpg)
}
</style>
</head>
<body>
<div class="Container">
<div id="Scroller-1">
<div class="Scroller-Container">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
iaculis, ante et congue feugiat, elit wisi commodo metus, ut commodo
ligula enim ac justo. Pellentesque id ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Phasellus vitae mi a elit dictum volutpat. Pellentesque
nec arcu. Etiam blandit. Phasellus egestas dolor ut lacus. Sed enim
justo, sagittis ut, condimentum non, ullamcorper eu, neque. In hac
habitasse platea dictumst. Integer ipsum risus, sagittis ac,
imperdiet ac, interdum sed, libero. Praesent commodo. Mauris congue,
urna eget hendrerit elementum, dolor ligula ultrices neque, in
elementum ante erat et elit.</p>
</div>
</div>
</div>
<div id="Scrollbar-Container">
<div class="Scrollbar-Track">
<div class="Scrollbar-Handle"></div>
</div>
</div>
</body>
</html>
</html>
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1.基本语法规范
分析一个典型CSS的语句：
p {COLOR:#FF0000BACKGROUND:#FFFFFF}
•其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
•样式声明写在一对大括号"{}"中；
•COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号""分隔；
•"#FF0000"和"#FFFFFF"是属性的值(value)。
2.颜色值
颜色值可以用RGB值写，例如：color : rgb(255,0,0)，也可以用十六进制写，就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
3.定义字体
web标准推荐如下字体定义方法：
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif}
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
•Lucida Grande字体适合Mac OS X；
•Verdana字体适合所有的Windows系统；
•Lucida适合UNIX用户
•"宋体"适合中文简体用户
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用
4.群选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
p, td, li { font-size : 12px }
5.派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong { font-style : italicfont-weight : normal；}
就是给li下面的子元素strong定义一个斜体不加粗的样式。
6.id选择器
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
<div id="menubar"></div>
然后在样式表里这样定义：
#menubar {MARGIN: 0pxBACKGROUND: #FEFEFECOLOR: #666}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
id选择器也同样支持派生，例如：
#menubar p { text-align : rightmargin-top : 10px}
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
6.类别选择器
在CSS里用一个点开头表示类别选择器定义，例如：
.14px {color : #f60 font-size:14px }
在页面中，用class="类别名"的方法调用：
<span class="14px">14px大小的字体</span>
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
7.定义链接的样式
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
a:link{font-weight : bold text-decoration : none color : #c00 }
a:visited {font-weight : bold text-decoration : none color : #c30 }
a:hover {font-weight : bold text-decoration : underline color : #f60 }
a:active {font-weight : bold text-decoration : none color : #F90 }
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。
