之前有寫過css/css3實現元素的水平和垂直居中的幾種方法點我，但是css3屬性不是所有瀏覽器都能相容的，今天寫下js實現未知寬高的元素的水平和垂直居中。 如果需要在有滾動條的情況的下要實現居中的效果，則需要加上scrollTop和scrollLeft。 ...
之前有寫過css/css3實現元素的水平和垂直居中的幾種方法點我，但是css3屬性不是所有瀏覽器都能相容的，今天寫下js實現未知寬高的元素的水平和垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
padding:50px;
display: inline-block;
background-color:pink;
position: absolute;
}
</style>
<script>
window.onload = function(){
// 獲取元素
var div = document.querySelector('div');
// 設置left
div.style.left=(window.innerWidth - div.offsetWidth)/2 + 'px';
// 設置top
div.style.top= (window.innerHeight- div.offsetHeight)/2 + 'px';
}
</script>
</head>
<body>
<div>
陌上人如玉
<br />
公子士無雙
</div>
</body>
</html>
如果需要在有滾動條的情況的下要實現居中的效果，則需要加上scrollTop和scrollLeft。
