CSS未知高度垂直居中的实现

前端  /  管理员 发布于 7年前   150

本文主要介绍了CSS未知高度垂直居中的实现，分享给大家，具体如下：

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

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


  • 上一条：
    CSS 、JS实现浪漫流星雨动画
    下一条：
    CSS多级菜单的实现代码

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客