实现的目的如图所示
介绍一下盒子在盒子中水平垂直居中的技巧:
container类为套在最外层的盒子,content类则是盒子里面的盒子,是我们呢要水平垂直居中的对象<div class="container"> <div class="floater"></div> <div class="content"> </div> </div>
关键点在于floater类的作用
<style> *{ padding: 0; margin: 0; } html,body,.container{ width: 100%; height: 100%; } .container{ border:1px solid black; margin: 0 auto; } .floater{ height: 50%; float: left; margin-bottom:-250px; } .content{ clear: both; border: 1px solid black; margin: 0 auto; width:500px; height:500px; } </style>
.floater的高度设为共同父辈盒子的50%,给予margin-bottom的值为.content高度的一般,之后在.content中清除浮动,便可以达到水平垂直居中的效果这个方法除了要多设一个前置标签外几乎没有其他缺点,可以放心大胆使用
之后便是动态的水平垂直居中,因为最重要的部分已经差不多哦了,这里直接附上加工后的全部代码以供参考
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-1.11.1.js"></script> <style> *{ padding: 0; margin: 0; } html,body,.container{ width: 100%; height: 100%; } .container{ background: red; margin: 0 auto; } .floater{ height: 50%; float: left; } .content{ clear: both; /* border: 1px solid yellow; */ margin: 0 auto; background: blue; } </style> <script> $( function(){ var i = setInterval(function(){ for (var i = 0; i < $(".content").length; i++) { var papa=$(".content").parent().eq(i); var son = $(".content").eq(i); var floater = $(".floater").eq(i); son.css('width',''+papa.width()/1.25+'px').css('background','rgb('+parseInt(255*Math.random())+','+parseInt(255*Math.random())+','+parseInt(255*Math.random())+')'); son.css('height',''+papa.height()/1.25+'px'); floater.css('margin-bottom',''+ (-son.height()/2) +'px') } $(".content").eq($(".content").length-1).append('<div class="floater"></div><div class="content"></div>'); },1000) } ) </script> </head> <body> <div class="container"> <div class="floater"></div> <div class="content"> <div class="floater"></div> <div class="content"> <div class="floater"></div> <div class="content"> <div class="floater"></div> <div class="content"> <div class="floater"></div> <div class="content"> <div class="floater"></div> <div class="content"></div> </div> </div> </div> </div> </div> </div> </body> </html>
重点在于class的遍历,其他的地方就可以自己发挥了