<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ margin: 0px; padding:0px; } html,body{ height:100%; text-align: center; } body:after{ content: ""; display: inline-block; height:100%; vertical-align: middle; text-align: center; } img{ vertical-align: middle; -webkit-box-reflect: left 10px; overflow: auto; } .test{ text-align: left; text-indent:32px; display: inline-block; width:300px; height:300px; margin:auto; vertical-align: middle; background-color: pink; } </style> </head> <body> <img class="test" src="../img/test.jpg" width="200px"/> </body> </html>
img 只定义宽度（或者制定一高度，图片会等比缩放），指定高度和宽度会出现拉伸，图片的居中可以决定定为，也可以使用同级的 after 属性设置样式：代码如下
:after{ content: ""; display: inline-block; height:100%; vertical-align: middle; text-align: center; }
效果： 先居中，再向左倒影
