因爲加載圖片可能有延遲，這是我用過的複用率最高的代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="myButton.css">
<script src="../../jquery.min.js"></script>
<style>
</style>
</head>
<body >
<div id="root" style="position: relative; height:700px;width: 1000px;background-color:red;">
<div id="viewer" style="width: 100%; height: 100%; overflow: hidden; position: absolute;">
<div id="canvas" style="position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;">
<div id="container" style="position: absolute; transform: scale(1);">
<img id='img' src="./image/1.jpg" style="position: absolute;width: auto; height: auto; display: block;"/>
</div>
</div>
</div>
</div>
</body>
<script>
$('#img').on('load',function(){
//圖片寬、高
var imgWidth = $(this).width();
var imgHeight = $(this).height();
console.log(imgWidth+'--'+imgHeight);
// 外部區域的寬高
var outerWidth = $('#root').width();
var outerHeight = $('#root').height();
console.log(outerWidth+'--'+outerHeight);
// 計算後居中的位置
var left = (outerWidth-imgWidth)/2;
var top = (outerHeight-imgHeight)/2;
$('#container').css({
top : top+'px',
left : left+'px'
});
});
</script>
</html>
需要jquery和一個圖片。我就不貼了，效果如圖：
