利用CSS的translate属性或利用CSS实现图片居中的效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0;padding:0; } .parent { float: left; width: 100%; height: 200px; background-color: red; } .children { float:left; position:relative; top:50%; left:50%; } .children-inline { position: relative; left: -50%; -webkit-transform : translate3d(0, -50%, 0); transform : translate3d(0, -50%, 0); background-color: black; color:white; } </style> </head> <body> <div class="parent"> <div class="children"> <div class="children-inline"><img src="http://nec.netease.com/img/s/2.jpg" alt=""/></div> </div> </div> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin: 0; } .parent { position:relative; width:100%; height:200px; background:red; } .div-in { position:absolute; top:50%; left:50%; } .hidden-img { visibility:hidden; } .show-img { position:absolute; right:50%; bottom:50%; } </style> </head> <body> <div class="parent"> <div class="div-in"> <img class="hidden-img" src="http://nec.netease.com/img/s/2.jpg" alt="" /> <img class="show-img" src="http://nec.netease.com/img/s/1.jpg" alt="" /> </div> </div> </body> </html>
效果图：
