今天小编给大家分享一下div盒子水平垂直居中的方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来
今天小编给大家分享一下div盒子水平垂直居中的方法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
我们的html是这样滴:
1、使用top:50% left:50% 以及margin-top 和 margin-left 来进行定位
注意: 必须知道盒子的具体的宽和高,否则无法计算margin的值
2、使用top:50% left:50% 以及 transfORM: translate(-50%,-50%);
来进行定位
注意: 跟上一种相比,不需要宽和高,内容就会撑开盒子,但是兼容性差
3、使用top:0 left:0 right:0 bottom:0 以及 margin:auto
注意: 盒子必须有宽和高,但不会用到宽和高进行具体的计算
水平居中方法: 将浏览器可视区的宽度(clientWidth) 减去 要居中元素本身的宽度(offsetWidth) /除以 2 +‘px’
垂直居中方法: 将浏览器可视区的高度(clientHeight) 减去 要居中元素本身的高度(offsetHeight) /除以 2 +‘px’
以上就是“div盒子水平垂直居中的方法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网JavaScript频道。
--结束END--
本文标题: div盒子水平垂直居中的方法有哪些
本文链接: https://www.lsjlt.com/news/91241.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0