一、ie9不支持line-height字体垂直居中兼容问题
原因:CSS中使用了中文字体，而中文字体使用汉字。如：font-family:"微软雅黑"
1、将中文字体汉字转换为Unicode编码
“黑体”对应Unicode编码为“\9ED1\4F53”
“宋体”对应Unicode编码为“\5B8B\4F53”
“仿宋”对应Unicode编码为“\4EFF\5B8B”
“微软雅黑”对应Unicode编码为“\5FAE\8F6F\96C5\9ED1”
将汉字转换为Unicode编码的字符，即成功设置相应字体，又兼容IE9浏览器支持垂直居中line-height样式。汉字字体中文字转换为Unicode编码后字体效果相同，不受影响，兼容各大浏览器。记不住可以http://www.divcss5.com/jiqiao/j325.shtml查看。
2、将中文字体汉字使用英文名
将CSS+DIV布局中CSS设置中文字体汉字转换对应英文名字体，转换后设置中文字体效果不变，并兼容各大浏览器。
“黑体”对应英文名为“SimHei”
“宋体”对应英文名为“SimSun”
“仿宋”对应英文名为“FangSong”
“微软雅黑”对应英文名为“Microsoft YaHei”
将div css布局中css字体使用汉字字体转换为英文名的字体，其设置字体效果不变不受影响，并兼容各大浏览器，大家可以放心使用。
二、div居中
主要css代码有两个，一个为text-align:center（内容居中），另外一个为margin:0 auto；其两个样式需要配合使用才能实现div盒子的居中显示排版。
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00}
/* css注释：为了观察效果设置宽度 边框 高度等样式 */
此居中方法是让div居中效果完美兼容各大平台、兼容各大浏览器，无论高版本ie还是高版本的ie均兼容。
三、DIV CSS布局图文列表布局案例 ul li图文列表
CSS
ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
ul.imglist li{ float:left; padding:4px 8px; width:160px}
ul.imglist li img{ display:block; width:160px; height:90px}
ul.imglist li span{ display:block; width:100%; height:30px; line-height:30px; background:#F6F
HTML
<ul class="imglist">
<li>
<a href="#" target="_blank">
<img src="data:images/i160x90.jpg" />
<span>自制快手糟黄瓜 吃完整个</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="data:images/i160x90-2.jpg" />
<span>标题内容 吃完整个</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="data:images/i160x90-3.jpg" />
<span>自制快手糟黄瓜 吃完整个</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="data:images/i160x90-2.jpg" />
<span>自制快手糟黄瓜 吃完整个</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="data:images/i160x90.jpg" />
<span>自制快手糟黄瓜 吃完整个</span>
</a>
</li>
<li>
<a href="#" target="_blank">
<img src="data:images/i160x90-2.jpg" />
<span>自制快手糟黄瓜 吃完整个</span>
</a>
</li>
</ul>
关键代码解释：
使用margin:0 auto，让ul结构布局居中；
overflow:hidden，因为ul的子级使用float属性会产生浮动，所以使用清除子级使用float对父级产生不能撑开问题；
display:block对图片设置独占一行；
display:block让span设置宽度高度生效同时独占一行效果；
line-height:30px; 设置文字在30px中垂直居中；
四、DIV+CSS模板初始化
样式：
@charset "utf-8";
/* DIVCSS5 - www.divcss5.com */
body, div,iframe, ul, ol, dl, dt, dd, li, dl,
h1, h2, h3, h4, table,th, td, input, button, select,
textarea {margin:0; padding:0;
font-style: normal;font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif;}
/* \5B8B\4F53 宋体 更多中文字体
转换Unicode编码表网址 http://www.divcss5.com/jiqiao/j325.shtml */
ol, ul ,li{list-style: none;}
img {border: 0; vertical-align:middle;}
body{color:#000000;background:#FFF; text-align:center;}
.clear{clear:both;height:1px;width:100%;
overflow:hidden; margin-top:-1px;}
a{color:#000000;text-decoration:none; }
a:hover{color:#F00;}
.red ,.red a{ color:#F00;}
.blue ,.blue a{ color:#1E51A2;}
.lf{float:left;}
.rt{float:right;}
.pt5{padding-top:5px;}
.pb5{padding-bottom:5px;}
#header ,#main ,#footer{ margin:0 auto;
width:980px; overflow:hidden}
#main_left{ float:left;}
#main_right{ float:right;}
模版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIVCSS5-HTML模板 UTF-8 - www.divcss5.com </title>
<meta name="keywords" content="关键词" />
<meta name="description" content="关键词描述" />
<link rel="stylesheet" href="images/style.css" />
<script src="JS文件路径地址" type="text/javascript"></script>
</head>
<body>
欢迎您使用初始化的HTML+CSS模板！<br />
<div class="clear"></div>
</body>
</html>
五、靠左靠右布局与只靠左布局DIV CSS实例
.boxs{ margin:0 auto; height:70px; width:550px; background:#4089B2;
padding-top:32px; overflow:hidden}
.box-left{ float:left; width:250px; text-align:right}
.box-right{ float:right; width:250px; text-align:left}
.boxs2{ margin:0 auto; height:70px; width:550px; background:#4089B2; padding-top:32px}
.box-left2{ float:left; width:154px; padding-left:96px}
.box-right2{ float:left; width:154px; padding-left:50px}
<p>使用靠左float:left 靠右float:right实现布局：</p>
<div class="boxs">
<div class="box-left"><a href="#"><img src="data:images/ad1.gif" /></a></div>
<div class="box-right"><a href="#"><img src="data:images/ad2.gif" /></a></div>
</div>
<p>使用靠左float:left和padding实现布局：</p>
<div class="boxs2">
<div class="box-left2"><a href="#"><img src="data:images/ad1.gif" /></a></div>
<div class="box-right2"><a href="#"><img src="data:images/ad2.gif" /></a></div>
</div>
六、div css绝对定位布局案例 不规律业务流程CSS布局实例
1、position:relative
父级赋予其定位
2、position:absolute
子级设置其样式，相等于父级设置定位样式
3、left、top、right、bottom
对子级设置定位在父级位置