效果：
实现一：绝对定位加精算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆角Img示例</title>
<style type="text/css">
.parentDiv{
width:200px;
height:400px;
background-color:yellow;
position:relative;
}
.childImg{
position:absolute;
height:128px;
width:128px;
left:36px;/* (200-128)/2 */
top:136px;/* (400-128)/2 */
}
</style>
</head>
<body>
<div class="parentDiv">
<img class="childImg" src="bggj-08.png" />
</div>
</body>
</html>
实现二：无须计算 自动偏移 比上面方法省事
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片垂直水平居中</title>
<style type="text/css">
.parentDiv{
width:200px;
height:400px;
background-color:yellow;
position:relative;
}
.childImg{
height:128px;
width:128px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="parentDiv">
<img class="childImg" src="bggj-08.png" />
</div>
</body>
</html>
方法三：柔性布局，但仅在Chrome中好用，Editplus3不支持，别的浏览器自己试。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片垂直水平居中</title>
<style type="text/css">
.parentDiv{
width:200px;
height:400px;
background-color:yellow;
display:flex;
justify-content:center;
align-items:center;
}
.childImg{
height:128px;
width:128px;
}
</style>
</head>
<body>
<div class="parentDiv">
<img class="childImg" src="bggj-08.png" />
</div>
</body>
</html>
END