使用jquery的onresize事件可以监听浏览器窗口大小的改变,并在窗口大小改变时动态修改div的位置。
具体实现步骤如下:
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<div id="myDiv" style="position: absolute; top: 100px; left: 100px;">Hello, World!</div>
$(window).on('resize', function() {
var newTop = $(window).height() / 2 - $('#myDiv').height() / 2; // 计算新的top值
var newLeft = $(window).width() / 2 - $('#myDiv').width() / 2; // 计算新的left值
$('#myDiv').css({ top: newTop, left: newLeft }); // 修改div的位置
});
以上代码中,resize事件会在窗口大小改变时触发。通过计算新的top和left值,可以将div居中显示。
#myDiv {
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
text-align: center;
line-height: 100px;
}
这样,当浏览器窗口大小改变时,div会自动居中显示。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云