Div 布局之 DIV垂直居中显示

中间放入表格  IE 火狐 chrome 测试通过

<html>
    <style>
#a {
    background: #fff000;
    500px;
    height: 500px;
    overflow: hidden;
    text-align: center;
}
</style>
    <body>
        <div id="a">
            <table width="100%" height="100%">
                <tr>
                    <td align="center">
                        <img src="http://static.cnblogs.com/images/logo_small.gif" />
                    </td>
                </tr>
            </table>
        </div>
    </body>

</html> 

 中间放入表格  IE  测试通过 

火狐 chrome 测试无效

<html>
    <style>
    #image{ 
        500px;
        height:500px;
        background:#fff000;
        text-align: center;
        overflow: hidden;
    }
    #image img {
    vertical-align: middle;
   }
    #block {
        0px;
        height: 100%;
    }    
    </style>
    <body>
        <div id="image">
            <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/>
             <img src="" id="block"/>
        </div>
    </body>

</html> 

<html>
    <style>
 
   #global1{ 
        clear:left;
        100%; 
        background:#000000;
        text-align: center;
        overflow: hidden;
    } 
  #global{ 
        800px; 
        background:#FFFFFF;
        text-align: center;
        overflow: hidden;
    }
#head{ 
        800px;
        height:200px;
        background:#555555;
        text-align: center;
        overflow: hidden;
    }   
    #left{ 
   float:left;
        200px;
        height:700px;
        background:#888888;
        text-align: center;
        overflow: hidden;
    }   
#right{ 
   float:left;
        600px;
        height:700px;
        background:#777777;
        text-align: center;
        overflow: hidden;
    }   
#bottom{ 
        800px;
        height:150px;
        background:#666666;
        text-align: center;
        overflow: hidden;
    }   
    </style>
    <body> 
  <div id="global1">
  <table width="100%" height="100%">
                <tr>
                    <td align="center">
                           <div id="global">
                               <div id="head">
                                   head
                               </div>
                        <div id="left">
                                   left
                               </div>
                      <div id="right">
                                   right
                               </div>
                      <div id="bottom">
                                   bottom
                               </div>
                        </div>  
                    </td>
                </tr>
            </table> 
</div>  
    </body>
</html>
原文地址:https://www.cnblogs.com/heling/p/2585748.html