DIV+CSS 水平垂直居中显示

DIV水平居中显示：

定义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中内容水平居中

HTML，DIV，CSS，水平居中，垂直居中