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/