DIV+CSS 水平垂直居中显示

margin属性用于控制对象的上\右\下\左4个方向的外边距,使用两个参数时,第一个参数表示为上下边距,第二个参数表示为左右边距.除了直接使用数值外,margin还支持一个值叫auto,auto值是让浏览器自动判断边距.

IV水平居中显示：
定义div宽度后，设置{margin-left: auto; margin-right: auto;} 即可实现div水平居中，代码示例：
CSS：
<style>
.cdiv {
width:200px;
margin-left:auto;
margin-right:auto;
}
</style>
 HTML：
<div class="cdiv">fufuok.com</div>
－－－
DIV水平垂直居中显示：
将left和top设置为50%来定位div到浏览器中央，再将margin-left和margin-top值设置为宽和高的一半，使div居中显示。示例如下：
CSS： 
<style>
.ccdiv {
position:absolute;
width:600px;
height:200px;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-100px;
border: solid 5px red;
}
</style>
HTML：
<div class="ccdiv">fufuok.com</div>
－－－
两个DIV水平垂直居中显示：
CSS：
<style>
.div1 {
position:absolute;
background:#FF6600;
width:500px;
height:100px;
left:50%;
top:50%;
margin:-50px 0 0 -400px;
}
.div2 {
position:absolute;
background:#006699;
width:300px;
height:100px;
left:50%;
top:50%;
margin:-50px 0 0 100px;
}
</style>
HTML：
<div class="div1">-800/2</div>
<div class="div2">500-400</div>
－－－div+css 水平居中 - div+css 垂直居中 - div中内容水平居中
 
可能的值
值
描述
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
详见：http://www.w3school.com.cn/