这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的、、等,而像

这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。
Tips: 完美解决方案在文末!

一、单行垂直居中

如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
如:

div {  
    height:25px;  
    line-height:25px;  
    overflow:hidden;  
    }  
    

这段代码很简,后面使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行,这样就达不到垂直居中效果了。

    
       单行文字实现垂直居中 
      
           
            
      
            
             
        body { font-size:12px;font-family:tahoma;} 
      div { 
        height:25px; 
        line-height:25px; 
        border:1px solid #FF0099; 
        background-color:#FFCCFF; 
      } 
    
      
    
    
    
      
             
现在我们要使这段文字垂直居中显示!
 

二、多行未知高度文字的垂直居中

如果一段内容,它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法,就是设定Padding,使上下的padding值相同即可。同样的,这也是一种“看起来”的垂直居中方式,它只不过是使文字把

完全填充的一种访求而已。可以使用类似下面的代码:

div {  
    
    padding:25px;  
    
    }  
    

这种方法的优点就是它可以在任何浏览器上运行,并且代码很简单,只不过这种方法应用的前提就是容器的高度必须是可伸缩的。

    
       多行文字实现垂直居中 
      
            
             
    
      
             
              
    
        body { font-size:12px;font-family:tahoma;} 
        div { 
        padding:25px; 
        border:1px solid #FF0099; 
        background-color:#FFCCFF; 
        width:760px; 
    
      } 
      
    
    
      
              

    
现在我们要使这段文字垂直居中显示! 
        

  
 

三、多行文本固定高度的居中

在本文的一开始,我们已经说过CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟

模拟
,所以我们可以使用这个属性来让
元素:

div#wrap {  
    height:400px;  
    display:table;  
    }  
    div#content {  
    vertical-align:middle;  
    display:table-cell;  
    border:1px solid #FF0099;  
    background-color:#FFCCFF;  
    width:760px;  
    } 
    
    
       多行文字实现垂直居中 
      
             
              
      
              
               
        body { font-size:12px;font-family:tahoma;} 
        div#wrap { 
        height:400px; 
        display:table; 
        } 
        div#content { 
        vertical-align:middle; 
        display:table-cell; 
        border:1px solid #FF0099; 
        background-color:#FFCCFF; 
        width:760px; 
        } 
      
    
    
    
      
               
                
        
                
                 
        

现在我们要使这段文字垂直居中显示!          div#wrap {         height:400px;         display:table;         }         div#content {         vertical-align:middle;         display:table-cell;         border:1px solid #FF0099;         background-color:#FFCCFF;         width:760px;         }       

    

这个方法应该是很了,但是不幸的是Internet Explorer 6 并不能正确地理解display:table和display:table-cell,因此这种方法在Internet Explorer 6及以下的版本中是无效的。嗯,这让人很郁闷!不过我们还其它的办法。
 
四、在Internet Explorer中的解决方案

在Internet Explorer 6及以下版本中,在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行定位后,如果再对子元素进行百分比计算时,计算的基础似乎是有继承性的(如果定位的数值是绝对数值没有这个问题,但是使用百分比计算的基础将不再是该元素的高度,而从父元素继承来的定位高度)。
 
例如,我们有下面这样一个(X)HTML代码段:

             
    
              
    
               
     
     
    
     
    

              
             
            

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

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的原理,我也只是了解了一点皮毛,还要再研究)

    
       多行文字实现垂直居中 
      
            
             
      
             
              
        body { font-size:12px;font-family:tahoma;} 
        div#wrap { 
          border:1px solid #FF0099; 
          background-color:#FFCCFF; 
          width:760px; 
          height:400px; 
          position:relative; 
        } 
        div#subwrap { 
          position:absolute; 
          top:50%; 
        } 
        div#content { 
          position:relative; 
          top:-50%; 
        } 
      
    
      
      
              
               
        
               
                
          
                
                 
现在我们要使这段文字垂直居中显示! 
            div#wrap { 
              border:1px solid #FF0099; 
              background-color:#FFCCFF; 
              width:760px; 
              height:500px; 
              position:relative; 
    
            } 
            div#subwrap { 
              position:absolute; 
              border:1px solid #000; 
              top:50%; 
            } 
            div#content { 
    
              border:1px solid #000; 
    
              position:relative; 
    
              top:-50%; 
            }
        
                 

五、完美的解决方案

那么我们综合上面两种方法就可以得到一个完美的解决方案,不过这要用到CSS hack的知识。

div#wrap {  
    display:table;  
    border:1px solid #FF0099;  
    background-color:#FFCCFF;  
    width:760px;  
    height:400px;  
    _position:relative;  
    overflow:hidden;  
    }  
    div#subwrap {  
    vertical-align:middle;  
    display:table-cell;  
    _position:absolute;  
    _top:50%;  
    }  
    div#content {  
    _position:relative;  
    _top:-50%;  
    
    }  
    

至此,一个完美的居中方案就产生了。

    
        多行文字实现垂直居中 
       
            
             
      
             
              
        body { font-size:12px;font-family:tahoma;} 
        div#wrap { 
          display:table; 
          border:1px solid #FF0099; 
          background-color:#FFCCFF; 
          width:760px; 
          height:400px; 
          _position:relative; 
          overflow:hidden; 
        } 
        div#subwrap { 
          vertical-align:middle; 
          display:table-cell; 
          _position:absolute; 
          _top:50%; 
        } 
        div#content {  
          _position:relative; 
          _top:-50%; 
        } 
      
    
    
      
              
               
        
               
                
          
                
                 
          
现在我们要使这段文字垂直居中显示! 
              div#wrap { 
                border:1px solid #FF0099; 
                background-color:#FFCCFF; 
                width:760px; 
                height:500px; 
                position:relative; 
              } 
              div#subwrap { 
                position:absolute; 
                border:1px solid #000; 
                top:50%; 
              } 
              div#content { 
                border:1px solid #000; 
                position:relative; 
                top:-50%; 
              }
        
                

PS:垂直居中vertical-align的值是middle,而水平居中align的值是center,虽然同是居中但关键字不同。
 
六、实测可以完美实现各种浏览器兼容的居中方案 

下面这段代码经过实测,可以完美兼容IE7以上的IE浏览器,其它标准浏览器如火狐、谷歌等也没有问题。
 
说明:尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。

    
    
      
            
             
      
             水平垂直居中
      
             
              
        body {padding: 0; margin: 0;} 
        body,html{height: 100%;} 
        #outer {height: 100%; overflow: hidden; position: relative;width: 100%;} 
        #outer[id] {display: table; position: static;} 
        #middle {position: absolute; top: 50%;} /* for explorer only*/ 
        #middle[id] {display: table-cell; vertical-align: middle; position: static;} 
        #inner {position: relative; top: -50%;margin: 0 auto;} /* for explorer only */ 
        div.greenBorder {width:500px;height:584px;background:#333;} 
        *+html #outer[id]{position: relative;} 
        *+html #middle[id]{position: absolute; } 
      
    
    
    
      
              
               
        
               
                
          
                
                 
          
        
      
    
    
      
    

                
               
              
             
            

以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。
 
CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。
 
测试:Firefox1.5、Opera9.0、IE6.0、IE5.0通过。上面的代码不支持IE7,还需要在最下面加二句:

*+html #outer[id]{position: relative;}
*+html #middle[id]{position: absolute; }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
《囧妈》网络免费播出 疫情倒逼电影商业模式创新

《囧妈》网络免费播出

放长远来看,虽然今年观众免费看了《囧妈》,但他们会顺理
阿里上线“武汉加油”公益项目 8小时筹满7140万捐款

阿里上线“武汉加油”

1月24日下午16:40分,在阿里巴巴公益平台和支付宝公益平
英特尔财报利好促美股高开 芯片供应维持紧张态势

英特尔财报利好促美股

英特尔CEO斯万称,电脑芯片供应维持紧张态势。2020财年
淘宝春晚数据:660亿次互动 清空购物车最高2.3万元

淘宝春晚数据:660亿次

除夕夜当晚,清空淘宝购物车的活动互动次数超过660亿次,
截至23点 快手春晚互动量437亿次超去年208亿次

截至23点 快手春晚互

截至24日23点,全球观众参与快手前三轮红包互动累计达43
遭美国防部反对 美商务部撤回美企对华为限制措施

遭美国防部反对 美商

华尔街日报援引消息人士称,因遭到美国防部和财政部反对
最新文章
针对class、id所做的CSS HACK

针对class、id所做的C

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK
WEB标准教程:P标签的应用

WEB标准教程:P标签的

从今天开始,我将全面的共享出我所能理解的所有WEB标准
Web前端开发的Firefox插件

Web前端开发的Firefox

一、Web DeveloperWeb Developer 可说是网页设计师最
详解CSS粘性定位 sticky

详解CSS粘性定位 stic

这篇文章主要介绍了CSS粘性定位 sticky 的相关知识,本
详解css透明度之rgba和opacity的区别及兼容

详解css透明度之rgba

对于设置透明度,我们有两个可以选的css3属性:rgba 和 op
轻松搞懂CSS浮动与清除浮动图文详解

轻松搞懂CSS浮动与清

本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮

联系我们 | 网站地图 | 最近更新 | Tags标签云

©CopyRight 2006-2016 Lovean.Com Inc All Rights Reserved.

就可以使用vertical-align了。注意,display:table和display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个