热门关键字:
jquery > jquery教程 > jquery教程 > HTML5/CSS3基础——div盒子水平垂直居中的三种方案

HTML5/CSS3基础——div盒子水平垂直居中的三种方案

381
作者:管理员
发布时间:2021/4/10 17:51:37
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4403
  我们的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’




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐