`
zuoming99
  • 浏览: 139572 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

CSS 完美简易华丽的垂直居中

htmlcss垂直居中 
阅读更多

支持IE6 7 8，Firefox，Chrome，Opera，Safari 利用了一点float的小技巧

 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        html,body{height:100%;margin:0;}
        body{padding:1px;}
        #mid-helper {
            float: left;
            height: 50%;
            margin-bottom: -120px;

            width: 10px; /*测试用，可删除*/
            background-color: orange;  /*测试用，可删除*/
        }
        #mid {
            clear: both;
            height: 240px;

            background-color: #8fbc8f;  /*测试用，可删除*/
            opacity: .7;  /*测试用，可删除*/
            filter:alpha(opacity=70);  /*测试用，可删除*/
        }
    </style>
</head>
<body>

<div id="mid-helper">
</div>
<div id="mid">
    this is the #mid element
</div>

</body>
</html>


预览图：


  • 大小: 7.8 KB
分享到：
| 巧用 UserAgent 代替拙劣的 CSS hack
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics