zoukankan      html  css  js  c++  java
  • CSS解决未知高度垂直居中的问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">    <head>  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  <title>无标题 1</title> 
     <style type="text/css"> 
     body {padding: 0; margin: 0;}   
    body, html {height: 100%;}   
    #outer {height: 100%; overflow: hidden; position: relative; 100%; background:ivory;}   
    #outer[id] {display: table; position: static;}   
    #middle {position: absolute; top: 50%;} /* for explorer only*/  
    #middle[id] {display: table-cell; vertical-align: middle; position: static;}   
    #inner {position: relative; top: -50%; 400px;margin: 0 auto;} /* for explorer only */  
    div.greenBorder {border: 1px solid green; background-color: ivory;}   
    *+html #outer[id] {position: relative;} /* for IE7 */  
    *+html #middle[id] {position: absolute;} /* for IE7 */  
     
     </style> 
        </head>  <body> 
    
    
    <div id="outer">  
        <div id="middle">  
            <div id="inner" class="greenBorder">  
            </div>  
        </div>  
    </div>  
    
    
     </body>  </html>  
    
  • 相关阅读:
    对软件工程的困惑
    团队作业(七)
    团队作业(六)
    团队作业(五)
    团队作业(四)
    团队作业(三)
    团队作业(二)
    团队作业(一)
    代码
    课余作业 采访
  • 原文地址:https://www.cnblogs.com/dudu837/p/1903340.html
Copyright © 2011-2022 走看看