CSS教程之div垂直居中的多种方法

2020-05-01 09:50:31易采站长站整理

CSS Code复制内容到剪贴板

<div id="wrap">     
 <div id="subwrap">     
   <div id="content">     
 </div>     
</div>   
</div>   
  

如果我们对subwrap进行了绝对定位,那么content也会继承了这个这个属性,虽然它不会在页面中马上显示出来,但是如果再对content进行相对定位的时候,你使用的100%分比将不再是content原有的高度。例如,我们设定了subwrap的position为40%,我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;那么,如果我们设定subwrap的top:50%的话,我们必须使用100%才能使content回到原来的位置上去,但是如果我们把content也设置50%呢?那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中:

CSS Code复制内容到剪贴板

div#wrap {      
    border:1px solid #FF0099;      
 background-color:#FFCCFF;      
 width:760px;      
  height:400px;      
 position:relative;      
}      
div#subwrap {      
  position:absolute;      
    border:1px solid #000;      
    top:50%;      
}      
div#content {      
    border:1px solid #000;      
    position:relative;      
    top:-50%;      
}      
  

当然,这段代码只能在Internet Exlporer 6等计算存在问题的浏览器中才会有作用。(不过我不解,我查阅了很多文章,不知道是因为出处相同还是什么原因,似乎很多人都不愿意去解释Internet Exlporer 6中这这个Bug的原理,我也只是了解了一点皮毛,还要再研究)

XML/HTML Code复制内容到剪贴板

<!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">  
 <head>  
  <title> 多行文字实现垂直居中 </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />