1.css实现
1>主要使用display:table-cell 属性,然后根据table-cell的对齐特性。
2>把img当做行内元素,行高与div高度一致,然后调整。
2.javasript 实现
分别取div 的宽div_w,高div_h;
img的宽img_w,高img_h,
计算图片相对于div边界的偏移值x: (div_w - img_w) / 2, y:(div_h - img_h) / 2
然后设定css值。
下面是代码:
<!DOCTYPE html> <html> <head> <title></title> <!-- css 1 <style> *{ margin: 0; padding: 0; } .bgTest{ background-color: #57d5d5; width: 400px; height: 400px; margin: 0 auto; position: relative; display: table-cell; text-align:center; vertical-align: middle; } .another{ background-color: #79a75d; } </style> --> <style> *{ margin: 0; padding: 0; } .bgTest{ background-color: #57d5d5; width: 400px; height: 400px; margin: 0 auto; position: relative; line-height: 400px; text-align: center; } .another{ background-color: #8d50ff; } img{ vertical-align: middle; } </style> </head> <body> <div class="bgTest" > <img class="testImg" src="test1.jpg"> </div> <div class="bgTest another" > <img class="testImg" src="test1.jpg"> </div> <script src="jquery-1.9.1.min.js"></script> <!-- <script> $(function(){ var bg = $(".bgTest"); bg.each(function(){ var img = new Image(); img.src= $(this).find("img").first().attr('src'); $(this).find("img").first().css({position:"relative", left:($(this).width() - img.width) /2, top:($(this).height() - img.height) / 2} ); }) }); </script> --> </body> </html>
注释的部分分别是 css 方法1 和javascript方法。