How to achieve vertical centering of images of unknown height with CSS (code attached)

本篇文章给大家带来的内容是关于CSS如何实现未知高度图像的垂直居中（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

nbsp;html>
  
    
    <meta>  
    <meta>  
    <title> CSS垂直居中</title>  
    <style>  
      .container{  
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
       
    </style>  
    
    
    <h1>垂直居中（table）</h1>  
    <div>
        <table>
            <tr>
               <td>
                  <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
               </td>
           </tr>
       </table> 
   </div>
     
    

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

背景图片法

nbsp;html>


<title> CSS垂直居中</title>
<style>
.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>
 


<h1>垂直居中</h1>
<div>
    
</div>

CSS表达式法

  
    
    <meta>  
    <meta>  
    <title>司徒正美 CSS垂直居中</title>  
    <style>  
      .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>  
    
    
    <h1>垂直居中（CSS表达式）</h1>  
    <div>  
      <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >  
    </div>  
    

绝对定位法

nbsp;html>

  
    <meta>
    <meta>
    <title>司徒正美 CSS垂直居中</title>
    <style>
      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>
  
  
    <h1>垂直居中(绝对定位)</h1>
    <div>
      <p>
        <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
      </p>
    </div>
  

display:inline-block法

nbsp;html>

  
    <meta>
    <meta>
    <title>司徒正美 CSS垂直居中</title>
    <style>
      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]-->
    
  
  
    <h1>垂直居中(inline-block法)</h1>
    <div>
      <i></i>
      <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
    </div>
  

writing-mode法

nbsp;html>

  
    <meta>
    <meta>
    <title> CSS垂直居中</title>
    <style>
      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>
  
  
    <h1>垂直居中(writing-mode法)</h1>
    <div>
      <span>
        <img  alt="How to achieve vertical centering of images of unknown height with CSS (code attached)" >
      </span>
    </div>
  

The above is the detailed content of How to achieve vertical centering of images of unknown height with CSS (code attached). For more information, please follow other related articles on the PHP Chinese website!