jQuery+CSS完美实现div在屏幕上下左右居中及窗口自适应

在jQuery中，实现div元素在屏幕上下左右居中的方法通常是通过CSS来辅助完成的。以下是一个简单的示例： 首先，确保你的div有一个固定宽度和高度（如果不是固定尺寸，需要使用其他布局方式如flex布局）： ```html <div id="centerDiv" style="width: 300px; height: 200px; position: absolute;"></div> ``` 然后，使用jQuery设置其样式以达到居中的效果： ```javascript $(document).ready(function() { var divWidth = $('#centerDiv').outerWidth(); var divHeight = $('#centerDiv').outerHeight(); var windowWidth = $(window).width(); var windowHeight = $(window).height(); $('#centerDiv').css({ 'left': (windowWidth - divWidth) / 2, 'top': (windowHeight - divHeight) / 2 }); }); ``` 这段代码首先获取div的宽度和高度以及窗口的宽度和高度，然后计算出div应该相对于窗口的左边和顶部的距离，从而实现居中。 为了处理窗口大小改变的情况（如浏览器窗口缩放或移动到小屏幕设备上），可以添加resize事件监听器： ```javascript $(window).resize(function() { var divWidth = $('#centerDiv').outerWidth(); var divHeight = $('#centerDiv').outerHeight(); var windowWidth = $(window).width(); var windowHeight = $(window).height(); $('#centerDiv').css({ 'left': (windowWidth - divWidth) / 2, 'top': (windowHeight - divHeight) / 2 }); }); ``` 现代Web开发更推荐使用CSS的方式实现居中，例如Flexbox或Grid布局，或者对于定位居中，可以使用`transform: translate(-50%, -50%);`结合`position: absolute;`及`top: 50%; left: 50%;`来实现。 ######[AI写代码神器 | 422点数解答 | 2024-01-02 11:44:13]