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

Gretel ·

更新时间:2024-09-20

· 895 次阅读

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

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

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

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


    /*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;
        }

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

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和上面一样起对照作用*/
	    .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端页面时应用很广，同学们要多多练习哈！学会了使元素在浏览器窗口居中的方法后，那么如何使元素在父元素内居中呢？同学们可以自己思考一下，下期我再给大家介绍！