IE6&IE7：居中的div的父级元素中设置TEXT-ALIGN: center;即可实现此div居中
Firefox：在此居中的div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可
二 垂直居中
1. 固定高度
vertical-align:middle;表示行内垂直居中，将行距增加到和整个DIV一样高line-height:200px;
然后插入文字，就垂直居中了。
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
background:#F00;
400px;
vertical-align:middle;
height:200px;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>
2. 未知高度
尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。
a. 标准浏览器（如Firefox, Opera, Safari等）
垂直居中，Firefox中可将父级元素显示方式设定为TABLE(display: table;) ，或内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
<div style="display: table-cell; vertical-align: middle; height: 600px; 800px; border: 1px solid red;">
<p>垂直居中，Firefox only</p>
<p>垂直居中，Firefox only</p>
<p>垂直居中，Firefox only</p>
</div>
b. 非标准浏览器
IE6&IE7非标准浏览器中则需要借助css的特点实现垂直居中,只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
<div style="border: 1px solid red; height: 200px; position: relative;">
<div style="position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p>垂直居中，IE6 only</p>
<p>垂直居中，IE6 only</p>
<p>垂直居中，IE6 only</p>
</div>
</div>
</div>
c. 完美兼容解决方案
<div style="border: 1px solid red; position: relative; height: 200px;display: table-cell; vertical-align: middle;">
<div style="position: static !important; position: absolute; top: 50%;">
<div style="position: relative; top: -50%;">
<p>垂直居中，Firefox IE6 only</p>
<p>垂直居中，Firefox IE6 only</p>
<p>垂直居中，Firefox IE6 only</p>
</div>
</div>
</div>
d. 另一种解决方案
CSS
| 以下是引用片段： body {padding: 0; margin: 0;} body,html{height: 100%;} #outer {height: 100%; overflow: hidden; position: relative; 100%; background:ivory;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%;} /* for explorer only*/ #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%; 400px;margin: 0 auto;} /* for explorer only */ div.greenBorder {border: 1px solid green; background-color: ivory;} |
xhtml
| 以下是引用片段： <div id="outer"> <div id="middle"> <div id="inner" class="greenBorder"> </div> </div> </div> |
以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。
!important标记，Firefox & IE7支持!important标记，IE6忽略!important标记
在网页中的用法：
比如：在IE6中是蓝色，但是在Firefox & IE7中优先红色。 background-color:red !important;background-color:blue; 此属性必须在一行里面，不能换行。换行则失效。因为样式background-color只能定义一个，换行它默认background-color有多个定义。
其他元素居中
1、UL居中和li水平居中：
其实任何居中，只要是web元素，可加上id属性的都可以使用Div居中的方法。
只是要记住需把ul、li的宽度设置一下才，最好加个背景色才可以看出是否居中。
否则ul、li默认是一条撑满div，是看不出是否居中的。
2、image居中：
也可用上述Div方法，但我发现有时直接用最简单的<div align=center><img src=”xxx.jpg”></div>，维护起来更方便
body{BACKGROUND: url(http://image.99read.com/pic/smallbanner/li_5398_mid_080324112649.gif) #FFF no-repeat;}
body{TEXT-ALIGN: center;}
