论坛首页 Web前端技术论坛

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

浏览 1430 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-11-04  

<!DOCTYPE html>
<html>
<head>
    <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;
            position: relative;

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

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

</body>
</html>
 
  • 大小: 7.8 KB
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics