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

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

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

 position:fixed;  
 left:50%; 
 top:50%; 
 margin-left:-元素宽度的一半;  
 margin-top:-元素高度的额一半; 

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

    
    
    
 .box_compare {
     width: 100%;
     height: 1000px;
     background: skyblue;
 }
 
 .box {
  
     width: 500px; 
     height: 300px;
     background: blue;
     position: fixed;
     left: 50%; 
     top: 50%; 
     margin-top: -150px;
     margin-left: -250px;
 }
    



    
    

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

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;是无效的。
好，接下来我们再次尝试一下。

 
  
     .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;
      }
     


     
     

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

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