清风细雨楼

如何利用定位使元素居中(web端页面布局小技巧)
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

元素在浏览器窗口居中的方法

这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。

 position:fixed;  /*给想要居中的元素设置*/
 left:50%; /*或者right:50%*/
 top:50%; /*或者bottom:50%*/
 margin-left:-元素宽度的一半;  /*或者margin-right*/
 margin-top:-元素高度的额一半; /*或者margin-bottom*/

好，那接下来咱们就试一试吧！

<head>
    <meta charset="UTF-8">
    <style>
    /*box是在浏览器窗口居中，不是整个页面居中，这样你在上下滑动页面时，
    box元素是不动的，因此这里设置个box_compare元素能起参照作用，让它高度
    超过窗口高度，使页面出现滚动条*/
        .box_compare {
            width: 100%;
            height: 1000px;
            background: skyblue;
        }
        
        .box {
         /*给元素设置宽高*/
            width: 500px; 
            height: 300px;
            background: blue;
            position: fixed;
            left: 50%; /*元素最左边离窗口左边50%的距离*/
            top: 50%; /*元素最上边离窗口顶部上边50%的距离*/
            margin-top: -150px;
            margin-left: -250px;
        }
    </style>
</head>

<body>
    <div class="box_compare"></div>
    <div class="box"></div>
</body>

上面的方法其实有一个弊端，即，当元素未设置宽时是不能使用的，添加了定位后的元素未设置宽度的元素宽度由内容撑开的，因此不能使用这个方法，下面给大家提供一个更简捷的方法。

position: fixed; /*给想要居中的元素设置*/
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

这个方法可能会有同学不理解，为什么又是left: 0;right: 0;又是top: 0;bottom: 0;，这个目的是为了将它变成一个自由的元素，这时元素的宽高在未设置时默认是父元素的宽高，再使用margin: auto;就能使它在浏览器窗口居中了，否则，添加了fixed的元素使用margin: auto;是无效的。
好，接下来我们再次尝试一下。

<head>
<meta charset="UTF-8">
 <style>
  /*box_compare和上面一样起对照作用*/
     .box_compare {
        width: 100%;
           height: 1000px;
           background: skyblue;
     }
     .box {
           width: 60%;
           height: 300px;
           background: blue;
           position: fixed;
           left: 0;right: 0;
           top: 0;bottom: 0;
           margin: auto;
      }
     </style>
</head>
<body>
     <div class="box_compare"></div>
     <div class="box"></div>
</body>

上面这个方法在写web端页面时应用很广，同学们要多多练习哈！学会了使元素在浏览器窗口居中的方法后，那么如何使元素在父元素内居中呢？同学们可以自己思考一下，下期我再给大家介绍！

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com