廢話少說，直接上程式碼，懂的都懂：
<!DOCTYPE html>
<html style="font-size: 100px;">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
*{margin: 0; padding: 0;}
html,body{
width:100%;
height:100%;
overflow: hidden;
font-size: 0.2rem;
background-color:rgba(255, 250, 200, 1);
}
</style>
<script>
//動態實時監聽螢幕的變化或者時刻監聽使用者縮放螢幕大小來更改佈局做自適應
// 實現方式： 繫結resize事件，時刻監聽瀏覽器螢幕變化
//----設定需要居中的元素資訊，一頁僅允許一個元素
var cdom,xw,xh;
var cid='CentS';
function monitorSize () {
var w = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
let cy=((h - xh) / 2);
let cx=((w - xw) / 2);
cdom.style.top =cy+"px";
cdom.style.left =cx+"px";
document.getElementById('WH1').innerText='寬:'+w+',高:'+h;
document.getElementById('WH2').innerText='上:'+cy+',左:'+cx;
}
window.onload = () => {
cdom=document.getElementById(cid);
xw=cdom.clientWidth;
xh=cdom.clientHeight;
monitorSize();
console.log('頁面已載入完成！' + xw+','+xh);
window.addEventListener('resize', () => {monitorSize()});
}
</script>
</head>
<body>
讓一個元素在網頁上跟隨網頁視窗大小變化始終保持上下左右居中：<br/>
//動態實時監聽螢幕的變化或者時刻監聽使用者縮放螢幕大小來更改佈局做自適應<br/>
// 實現方式： 繫結resize事件，時刻監聽瀏覽器螢幕變化<br/>
//----設定需要居中的元素資訊，一頁僅允許一個元素 <br/>
//注意： 不用時需要移除，<br/>
// window.removeEventListener("resize", monitorSize);<br/>
視窗尺寸：<span id="WH1"></span>
<div id="CentS" style="background-color:rgba(255, 33, 66, 0.6);color:#efefef;width:3rem;height:1rem;position: absolute;top:3rem;left: 4rem;text-align: center;line-height: 1rem;">自動居中:<span id="WH2">
</span>
</div>
</body>
</html>
