怎么把元素居中在网页？有什么方法？
发布时间：2022-01-16 10:21:33 所属栏目：语言 来源：互联网
导读：在网页设计中，常会遇到让元素在网页居中的需求，那么怎么把元素居中在网页？有什么方法？其实实现元素居中并不难，接下来我们就一起来了解一下。 元素在浏览器窗口居中的方法 这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。 position:f
|
在网页设计中，常会遇到让元素在网页居中的需求，那么怎么把元素居中在网页？有什么方法？其实实现元素居中并不难，接下来我们就一起来了解一下。 元素在浏览器窗口居中的方法 这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。 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> （编辑：拼字网 - 核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐