今天在DIV制作页面的过程中，碰到文字无法垂直居中的问题，明明vertical-align已经设置为center但是显示的时候，文字依然顶端对齐。
　　那么如何解决呢？事实上是因为遗漏了line-height属性，没有设置行高，所以导致了文字无法垂直居中。
       以下为具体代码 ：
      
　　文中的text-align属性为文字水平设置，属性有center[居中]、inherit[继承父对象的属性]、justify[两端对齐]、left[左对齐]、right[右对齐]
　　文中的vertical-align属性为文字垂直设置，属性有baseline[基线]、bottom[]、inherit[继承父对象的属性]、middle[中线对齐]、sub[下标]、super[上标]、text-bottom[文本地对齐]、text-top[文本顶对齐]、top[顶部]，另外还可以设置百分比，如vertical-align:10%;
　　最后还要设置line-height属性，没有行高，也就没有办法判断该行的中线位置是哪，自然也就无法使文字显示为垂直居中了

1、应该将 CSS 放置于结构的上方（一般放置于 head 元素内）。CSS 是解释型语言，Firefox 和 IE 在等待 CSS 传输完成之前不会渲染任何东西。只有将 CSS 前置，才可在浏览器解析结构时，对页面进行渲染。  

This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text.  

导致的问题就是，页面会有一段时间“朴素”，突然之间又“华丽”，用户体验很不好。  

2、尽量使用 的样式导入方式，而减少 @import 的使用，更勿使用多层嵌套的 @import 。因为在 IE 里， @import 相当于将 放在页面尾部。

This is a valid syntax, but, even though it’s in the document’s HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.  

扩展阅读：《Flash of Unstyled Content (FOUC)》

按照CSS规范，浮动元素（floats）会被移出文档流，不会影响到块状盒子的布局而只会影响内联盒子（通常是文本）的排列。因此当其高度超出包含容器时，一般父容器不会自动伸长以闭合浮动元素。但是有时我们却需要这种自动闭合行为，具体如何处理呢？

　　有一种做法就是在父容器内再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。

　　后来又有了一种新的方式，使用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证 html 比较干净，所以用得还是比较多的。

　　再后来又有人发现将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理（具体就是触发layout），不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突。  

1.若有疑问立即检测

　　在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS 都有检测工具可用，请见 http://validator.w3.org 。请注意，在文件开头的错误，可能因为不当的结构等因素造成更多错误；我们建议先修正一些最明显的错误之后重新检测，这样也许会让错误数量爆减。

　　2.使用浮动功能时记得适当清除指令

　　浮动是个危险的功能，未必会产生您所期望的结果。如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况，请先确定您的做法是正确的。请参阅52CSS.com网站上的教学。

　　3.边界重合时利用padding或border来避免

　　您可能会为了一点不应该出现的空间而焦头烂额，或者您需要一点点空间时，怎样都挤不出来。如果您有用到margin，那么很容易产生边界的重合。

　　4.尝试避免同时对元素指定padding/border以及高度或宽度

　　Windows版IE经常导致width与height的计算问题。有些方法可以解决此问题，但如果母元素需要指定高度与宽度时，最好能够在母元素之内的子元素套用margin,或者当子元素需要指定高度与宽度时，在母元素套用padding以达效果。

　　5.不要依赖min-width/min-height

　　Windows版IE并不支援两种语法。但是在某种程度下，windows版IE可以达到相当于min-width/min-height的效果，所以只要对IE做点过滤功能，即可达到您想要的结果。

　　6.若有疑问，先减少百分比

　　有时候某些错误会使50% 50%成为100.1%，使网页出现问题。这时请尝试将这些值改为49%，甚至49.9%。

　　7.记住“TRBL”写法

　　border，margin与padding的简写语法有特定顺序，从上方开始顺时针方向转动：top,right,bottom,left. 所以margin:0 1px 3px 5px;的结果是上方无边界，右边1像素，以此类推。记住“TRBL”，您就不会弄错次序了。

　　8.只要不是零的值，都要指定单位

　　CSS需要您对每个font，margin等各种值指定单位。

1、css框架
中国的互联网行业已经发展了10年，浏览器也从最早流行的NS到现在的FF3.IE7等等……前端开发工程师的职位也诞生了。近几年在web开发中，有个非常火的词——“框架”。YUI、JQuery、Prototype这些javascript框架在开发网站时，确实成为前端开发工程师的手中利器。为什么呢？因为框架是包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，让设计师与程序员避免重复开发。通俗地讲便是把大多数重复工作的时间给节约了。  

编写css也是一样，从最初只是定义文字颜色、内容排版，到现在定义所有的表现。css框架也渐渐被重视了，因为大家都认识到：从具象的表现中抽出抽象的模块来重复使用，是减少用户下载、方便团队及个人开发最重要的手段。  

单行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center; }  
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列
以下是引用片段：
body { margin: 0px; padding: 0px; text-align: center;}  
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}  
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

很早就想为CSS做个图,可惜一没时间二挺复杂,今天写了操作性之后,也懒得做活了,就打开fireworks开始作图啦!
下面是关于整个CSS的:



说明:
现阶段大家使用的CSS,分两中模式:Quirks mode和Strict mode,
Quirks mode自然是浏览器生产商自己的模式,其中含有对CSS的解析,私有CSS.
标准模式(strict mode),当然有W3C制定,现在浏览器普遍支持的和我们使用的是CSS 2.1 规范(CSS 2.1 Specification).
关于这两种模式的详细情况可去阅读Quirks mode and strict mode
根据Quirks mode诞生了CSS hack & filters,过滤浏览器,使的为网页设计CSS样式的时候,能够兼容各种浏览器.

关于属性的:



属性名可以包含以下信息
取值: 规定的值 & 语法
初始值: 初始的值
应用于:可以应用于哪些元素
继承性: 是否拥有继承性
百分率:百分比值是怎么工作的?
媒体: 可用于那种设备
优先权:后者覆盖前者
!important声明:声明优先权(IE5.X 6.0 不支持)
说明一下CSS的优先权,old9解释的比较详细,包括选择符的优先权,!important声明,@import规则,内嵌CSS。