·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5+css做垂直水平居中的三种实现方法源代码

时间:2016-12-04 13:33酷播
在网页中实现居中也不是如word中那么简单,尤其在内容样式多变[html5]html5+css做垂直水平居中的实现方法源代码

由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。
1、绝对定位+margin:auto

  1. <style type="text/css"> 
  2.     .wrp { 
  3.         background-color: #b9b9b9; 
  4.         width: 240px; 
  5.         height: 160px; 
  6.     } 
  7.     .box { 
  8.         color: white; 
  9.         background-color: #3e8e41; 
  10.         width: 200px; 
  11.         height: 120px; 
  12.         overflow: auto; 
  13.     } 
  14.     .wrp1 { position: relative; } 
  15.     .box1 { 
  16.         margin: auto; 
  17.         position: absolute; 
  18.         left: 0; right: 0; top: 0; bottom: 0; 
  19.     } 
  20. </style> 
  21. <div class="wrp wrp1"> 
  22.     <div class="box box1"> 
  23.         <h3>完全居中层1:</h3> 
  24.         <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化CuPlayer.com酷播官方</h3> 
  25.     </div> 
  26. </div> 

 效果:

实现原理:利用css定位规则,设置左右、上下方向定位为0,margin为auto,让css根据定位计算margin值,用hack的方式实现居中。居中块(绿色)的尺

寸需要可控,因为css计算margin时也需要参考尺寸值,由于四周为0,所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-

height、max-width,都是让尺寸不会扩大到与父级一样。

2、绝对定位+margin反向偏移

</style><style type="text/css">

  1. .wrp2 { position: relative; } 
  2. .box2 { 
  3.     position: absolute; 
  4.     top: 50%; left: 50%; 
  5.     margin-left: -100px; /* (width + padding)/2 */ 
  6.     margin-top: -75px; /* (height + padding)/2 */ 

</style><div class="wrp wrp2">

  1. <div class="box box2"> 
  2.     <h3>完全居中方案二:</h3> 
  3.     <h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3> 
  4. </div> 

 </div>

效果:

实现原理:由于top、left偏移了父对象的50%高度宽度,所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比,因为百分比是针对

父对象的,所以需要手动计算定值指定margin值。这个方案需要固定尺寸值,以此来计算margin反向偏向值,所以方案2比方案1稍差!

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器