• CSS未知高度垂直居中


    最近群里这个问题比较热门,决定把我收藏的方法分享大家。在开始时,我们先看一下万能的table实现。

    <!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{  
            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 {
      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; 
            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;
            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;
            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{
            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>
    

    记得淘宝也搞一个font-size法,但我觉得上下差异比较大,就不收录了。怿飞的博客亦提到过一韩国人有个巧妙的实现,但日久链接失效了,谁收藏了也请提供一下。


    新发现的逆天方法,使用button 标签做容器

    SVG大法

  • 相关阅读:
    LAMP----linux+apache+mysql+php详细安装步骤之一APACHE篇(openldap等)
    Apache2 httpd.conf 配置详解
    Apache+php+mysql的安装与配置
    linux PHP 安装及 GD库安装
    Linux下安装PHP的GD支持库
    linux下tar.gz、tar、bz2、zip等解压缩、压缩命令
    Android中Context详解 ---- 你所不知道的Context(转)
    Android简单文件浏览器源代码 (转)
    Android入门之文件系统操作(一)简单的文件浏览器 (转)
    Android入门之文件系统操作
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/1774025.html
Copyright © 2020-2023  润新知