小编给大家分享一下HTML中怎么利用定位使元素居中，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便，适合初学前端开发者使用。 2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 3、平台无关性：超级文本标记语言能够在广泛的平台上使用，这也是万维网盛行的一个原因。 4、通用性：HTML是网络的通用语言，它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
元素在浏览器窗口居中的方法
这里先给出代码块，如果有同学已经看出来点眉目可以先自己尝试一下。
计算
安全
数据库
网络和加速
企业服务
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>上面这个方法在写web端页面时应用很广，同学们要多多练习哈！学会了使元素在浏览器窗口居中的方法后，那么如何使元素在父元素内居中呢？同学们可以自己思考一下，下期我再给大家介绍！
看完了这篇文章，相信你对“HTML中怎么利用定位使元素居中”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://www.jb51.net/css/723562.html
