<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现图片在浏览器页面垂直居中</title>
<style>
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div>
<img src="http://img.mukewang.com/54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</body>
</html>
transform:translate(-50%,-50%);指的是图片向左移动自身宽度的50%,向上移动自身高度的50%。
transform:translate(X,Y);