使用CSS实现div的水平和垂直居中 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>水平垂直居中div演示效果</title> 
<style type="text/css">
  
.align-center{ 
    /*
负边距+定位：水平垂直居中（Negative Margin）
    
 
使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，已到达水平垂直居中的效果。
    */
    position:absolute;
    left:50%;
    top:50%;
    width:400px;
    height:400px;
    margin-top:-200px;
    margin-left:-200px;    
    border:1px dashed #333;
} 
</style> 
</head> 
<body> 
<div class="align-center">水平垂直居中div演示效果</div> 
</body> 
</html> 
　　

 

posted @ 2013-04-09 16:00  令狐葱★  阅读(172)  评论(0)    收藏  举报