jquery div居中

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在网页开发中，经常需要将某个元素（如 div）居中显示，这可以通过 CSS 或 jQuery 来实现。

类型

jQuery 居中 div 可以分为水平居中和垂直居中两种类型。水平居中可以通过设置元素的 left 和 right 属性来实现，垂直居中则可以通过设置 top 和 bottom 属性来实现。

应用场景

在网页设计中，经常需要将某些元素（如弹出框、提示信息等）居中显示，以提升用户体验。jQuery 可以方便地实现这一需求。

示例代码

以下是一个使用 jQuery 实现 div 水平和垂直居中的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Div Center</title>
    <style>
        #container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #centered-div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <div id="centered-div"></div>
    </div>

    <script>
        $(document).ready(function() {
            function centerDiv() {
                var container = $('#container');
                var centeredDiv = $('#centered-div');
                var containerWidth = container.width();
                var containerHeight = container.height();
                var divWidth = centeredDiv.outerWidth(true);
                var divHeight = centeredDiv.outerHeight(true);

                centeredDiv.css({
                    left: (containerWidth - divWidth) / 2,
                    top: (containerHeight - divHeight) / 2
                });
            }

            $(window).resize(centerDiv);
            centerDiv();
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：为什么 div 没有居中？

原因：

容器或元素的尺寸没有正确设置：确保容器和元素的宽度和高度已经正确设置。
CSS 属性没有正确应用：确保 position 属性设置为 absolute 或 fixed，并且 left 和 top 属性已经正确计算并应用。
窗口大小变化没有重新计算位置：如果窗口大小变化，需要重新计算并设置元素的位置。

解决方法：