方法一：通过增加100%高度行内块居中对齐
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 220px; text-align: center; border: 1px solid red; } span{ height: 100%; display: inline-block; vertical-align: middle; } img{ vertical-align: middle; } </style> </head> <body> <div> <span></span><img src="demo.jpg"> </div> </body> </html>
方法二：通过table/table-cell样式居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 220px; text-align: center; border: 1px solid red; display: table; } span{ display: table-cell; vertical-align: middle; } img{ vertical-align: middle; } </style> </head> <body> <div class="container"> <span><img src="demo.jpg"></span> </div> </body> </html>
方法三：设置为背景图片居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 220px; text-align: center; border: 1px solid red; background-image: url('demo.jpg'); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div> </div> </body> </html>