position relative top失效的问题,温习下常用两种的居中方式 

因为body和html，默认高度是auto

所以相对于他们作为父元素设置position:relative的top值需要加上body,html{height:100%;}

 

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style type="text/css">
    　　*{margin: 0; padding: 0;list-style: none;} 
   　　 html,body{height:100%;}  /* 相对屏幕必填写 */
　　　　/*.maxbox{width: 500px;height: 500px;background-color:pink;position:relative;top:50%;left:50%;transform:translate(-50%,-50%);} 选其一*/  
　　　　.maxbox{width: 500px;height: 500px;background-color:pink;position:relative;top:50%;left:50%;margin:-250px 0 0 -250px;}
　　　　.maxbox div{width: 200px;height: 200px;background-color:red;position:absolute;top:50%;margin-top:-100px;left:0;}
    </style>
    <body>
            <div class="maxbox">
                <div></div>
            </div>
    </body>
</html>
复制代码

 

posted @   xuanPhoto  阅读(509)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示