主页 / 建站知识 /

如何利用定位使元素居中(web端页面布局小技巧

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

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

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

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

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

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

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

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

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

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

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

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

到此这篇关于如何利用定位使元素居中(web端页面布局小技巧)的文章就介绍到这了,更多相关页面定位使元素居中内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：flex弹性盒布局最后一行左对齐的实现思路 下一篇：CSS3实现渐变背景兼容问题

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by