<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片垂直居中在中间</title> </head> <style type="text/css"> .war { 100%; height:100%; overflow:hidden; display:-webkit-box; -webkit-box-align:center; -webkit-box-pack:center; display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:center; position:absolute; position:fixed; top:0; right:0; left:0; bottom:0; } .war img { max-height:100%; max-100%; } </style> <body> <div class="war"> <img src="image/2.jpg"> </div> </body> </html>