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’

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61683.shtml

张贴在2