CSS未知高度垂直居中

最新推荐文章于 2024-09-17 00:54:14 发布

jazwoo

最新推荐文章于 2024-09-17 00:54:14 发布

阅读量645

点赞数

分类专栏： html/css 文章标签： css div border ie class table

html/css 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

出处 http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html。

 
         <!doctype html> 
        
         < 
         html 
         lang 
         = 
         "en" 
         >   
        
         < 
         head 
         >   
        
         < 
         meta 
         charset 
         = 
         "utf-8" 
         />   
        
         < 
         meta 
         content 
         = 
         "IE=8" 
         http-equiv 
         = 
         "X-UA-Compatible" 
         />   
        
         < 
         title 
         >司徒正美 CSS垂直居中</ 
         title 
         >   
        
         < 
         style 
         type 
         = 
         "text/css" 
         >   
        
         .container{   
        
         width:500px;/*装饰*/ 
        
         height:500px;   
        
         background:#B9D6FF;   
        
         border: 1px solid #CCC;   
        
         }   
        
         </ 
         style 
         >   
        
         </ 
         head 
         >   
        
         < 
         body 
         >   
        
         < 
         h1 
         >垂直居中（table）</ 
         h1 
         >   
        
         < 
         div 
         class 
         = 
         'container' 
         > 
        
         < 
         table 
         width 
         = 
         "100%" 
         height 
         = 
         "100%" 
         > 
        
         < 
         tr 
         > 
        
         < 
         td 
         align 
         = 
         "center" 
         valign 
         = 
         "middle" 
         > 
        
         < 
         img 
         src 
         = 
         "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" 
         /> 
        
         </ 
         td 
         > 
        
         </ 
         tr 
         > 
        
         </ 
         table 
         >  
        
         </ 
         div 
         > 
        
         </ 
         body 
         >   
        
         </ 
         html 
         >

好了，我们看其CSS实现。凡是table能做到的，CSS都能做的，但各浏览器在CSS的差异比较大，因此要兼容它们难度很大。这涉及许多细节，各种流啊，display的表现效果与CSS hack，IE早些年搞了大堆的私有属性，这也有待我们深一步挖掘。我们先看最简单的实现，背景图片法——

背景图片法

 
         <!doctype html> 
        
         < 
         html 
         > 
        
         < 
         head 
         > 
        
         < 
         title 
         >司徒正美 CSS垂直居中</ 
         title 
         > 
        
         < 
         style 
         type 
         = 
         "text/css" 
         > 
        
         .container { 
        
         width:500px; 
        
         height:500px; 
        
         line-height:500px; 
        
         background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center; 
        
         border:1px solid #f00; 
        
         text-align: center; 
        
         } 
        
         </ 
         style 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         h1 
         >垂直居中（背景图片法）</ 
         h1 
         > 
        
         < 
         div 
         class 
         = 
         "container" 
         > 
        
         </ 
         div 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >

CSS表达式法

 
         < 
         html 
         lang 
         = 
         "en" 
         >   
        
         < 
         head 
         >   
        
         < 
         meta 
         charset 
         = 
         "utf-8" 
         />   
        
         < 
         meta 
         content 
         = 
         "IE=8" 
         http-equiv 
         = 
         "X-UA-Compatible" 
         />   
        
         < 
         title 
         >司徒正美 CSS垂直居中</ 
         title 
         >   
        
         < 
         style 
         type 
         = 
         "text/css" 
         >   
        
         .container{   
        
         /*IE8与标准游览器垂直对齐*/ 
        
         display: table-cell; 
        
         vertical-align:middle;  
        
         width:500px;/*装饰*/ 
        
         height:500px;   
        
         background:#B9D6FF;   
        
         border: 1px solid #CCC;   
        
         }   
        
         .container img{   
        
         display:block;/*让其具备盒子模型*/ 
        
         margin:0 auto;   
        
         text-align:center; 
        
         margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */ 
        
         }   
        
         </ 
         style 
         >   
        
         </ 
         head 
         >   
        
         < 
         body 
         >   
        
         < 
         h1 
         >垂直居中（CSS表达式）</ 
         h1 
         >   
        
         < 
         div 
         class 
         = 
         "container" 
         >   
        
         < 
         img 
         src 
         = 
         "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" 
         />   
        
         </ 
         div 
         >   
        
         </ 
         body 
         >   
        
         </ 
         html 
         >

绝对定位法

 
         <!doctype html> 
        
         < 
         html 
         lang 
         = 
         "en" 
         > 
        
         < 
         head 
         > 
        
         < 
         meta 
         charset 
         = 
         "utf-8" 
         /> 
        
         < 
         meta 
         content 
         = 
         "IE=8" 
         http-equiv 
         = 
         "X-UA-Compatible" 
         /> 
        
         < 
         title 
         >司徒正美 CSS垂直居中</ 
         title 
         > 
        
         < 
         style 
         type 
         = 
         "text/css" 
         > 
        
         div { 
        
         /*IE8与标准游览器垂直对齐*/ 
        
         display:table-cell; 
        
         vertical-align:middle; 
        
         overflow:hidden; 
        
         position:relative; 
        
         text-align:center; 
        
         width:500px;/*装饰*/ 
        
         height:500px; 
        
         border:1px solid #ccc; 
        
         background:#B9D6FF; 
        
         } 
        
         div p { 
        
         +position:absolute; 
        
         top:50% 
        
         } 
        
         img { 
        
         +position:relative; 
        
         top:-50%; 
        
         left:-50%; 
        
         } 
        
         </ 
         style 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         h1 
         >垂直居中(绝对定位)</ 
         h1 
         > 
        
         < 
         div 
         class 
         = 
         "container" 
         > 
        
         < 
         p 
         > 
        
         < 
         img 
         src 
         = 
         "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" 
         /> 
        
         </ 
         p 
         > 
        
         </ 
         div 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >

display:inline-block法

 
         <!doctype html> 
        
         < 
         html 
         lang 
         = 
         "en" 
         > 
        
         < 
         head 
         > 
        
         < 
         meta 
         charset 
         = 
         "utf-8" 
         /> 
        
         < 
         meta 
         content 
         = 
         "IE=8" 
         http-equiv 
         = 
         "X-UA-Compatible" 
         /> 
        
         < 
         title 
         >司徒正美 CSS垂直居中</ 
         title 
         > 
        
         < 
         style 
         type 
         = 
         "text/css" 
         > 
        
         div { 
        
         display:table-cell; 
        
         vertical-align:middle; 
        
         text-align:center; 
        
         width:500px; 
        
         height:500px; 
        
         background:#B9D6FF; 
        
         border: 1px solid #CCC; 
        
         } 
        
         </ 
         style 
         > 
        
         <!--[if IE]> 
        
         <style type="text/css"> 
        
         i { 
        
         display:inline-block; 
        
         height:100%; 
        
         vertical-align:middle 
        
         } 
        
         img { 
        
         vertical-align:middle 
        
         } 
        
         </style> 
        
         <![endif]--> 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         h1 
         >垂直居中(inline-block法)</ 
         h1 
         > 
        
         < 
         div 
         class 
         = 
         "container" 
         > 
        
         < 
         i 
         ></ 
         i 
         > 
        
         < 
         img 
         src 
         = 
         "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" 
         /> 
        
         </ 
         div 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >

writing-mode法

 
         <!doctype html> 
        
         < 
         html 
         lang 
         = 
         "en" 
         > 
        
         < 
         head 
         > 
        
         < 
         meta 
         charset 
         = 
         "utf-8" 
         /> 
        
         < 
         meta 
         content 
         = 
         "IE=8" 
         http-equiv 
         = 
         "X-UA-Compatible" 
         /> 
        
         < 
         title 
         >司徒正美 CSS垂直居中</ 
         title 
         > 
        
         < 
         style 
         type 
         = 
         "text/css" 
         > 
        
         div{ 
        
         width:500px; 
        
         height:500px; 
        
         line-height:500px; 
        
         text-align:center; 
        
         background:#B9D6FF; 
        
         border:1px solid #f00; 
        
         } 
        
         div span{ 
        
         height:100%\9; 
        
         writing-mode:tb-rl\9; 
        
         } 
        
         div img{ 
        
         vertical-align:middle 
        
         } 
        
         </ 
         style 
         > 
        
         </ 
         head 
         > 
        
         < 
         body 
         > 
        
         < 
         h1 
         >垂直居中(writing-mode法)</ 
         h1 
         > 
        
         < 
         div 
         class 
         = 
         "container" 
         > 
        
         < 
         span 
         > 
        
         < 
         img 
         src 
         = 
         "http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" 
         /> 
        
         </ 
         span 
         > 
        
         </ 
         div 
         > 
        
         </ 
         body 
         > 
        
         </ 
         html 
         >