CSS实现不定高度垂直居中兼容IE7

最新推荐文章于 2020-05-05 18:21:20 发布

陆康永

最新推荐文章于 2020-05-05 18:21:20 发布

阅读量1.5w

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/xiaomogg/article/details/49284309

版权

css 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <title>��������ʵ�ִ�ֱ���� </title>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <style type="text/css">  
            body {  
                font-size: 12px;  
                font-family: tahoma;  
            }  
              
            div#wrap {  
                display: table;  
                border: 1px solid #FF0099;  
                background-color: #FFCCFF;  
                width: 760px;  
                height: 400px;  
                *position: relative;  
                overflow: hidden;  
            }  
              
            div#subwrap {  
                vertical-align: middle;
                display: table-cell;
                *position: absolute;
                *top: 50%;
            }  
              
            div#content {  
                *position: relative;
                *top: -50%;
            }  
        </style>  
    </head>  
    <body>  
        <div id="wrap">  
            <div id="subwrap">  
                <div id="content">  
                    <pre>  
                     ��������Ҫʹ������ִ�ֱ������ʾ��    
      div#wrap {   
      border:1px solid #FF0099;    
      background-color:#FFCCFF;   
      width:760px;    
      height:500px;   
      position:relative;    
      }   
      div#subwrap {    
      position:absolute;   
      border:1px solid #000;    
      top:50%;   
      }    
      div#content {   
      border:1px solid #000;    
      position:relative;   
      top:-50%;    
     }</pre>  
                </div>  
            </div>  
        </div>  
    </body>  
</html>

陆康永

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS实现不定高度垂直居中兼容IE7

xmlns="http://www.w3.org/1999/xhtml"> ��ʵ�ִ�ֱ�� http-equiv="Content-Type" content="text/html; charset=utf-8" /> type="text/css"> body {
复制链接

扫一扫