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

时间：2021-05-08

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

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

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

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

<head> <meta charset="UTF-8"> <style> .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; } </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 { 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端页面时应用很广，同学们要多多练习哈！学会了使元素在浏览器窗口居中的方法后，那么如何使元素在父元素内居中呢？同学们可以自己思考一下，下期我再给大家介绍！

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章