jquery div浮动居中

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。浮动居中是指将一个 div 元素在父容器中水平和垂直居中对齐。

类型

水平居中：使 div 在父容器中水平居中。
垂直居中：使 div 在父容器中垂直居中。
水平和垂直居中：使 div 在父容器中同时水平和垂直居中。

应用场景

浮动居中广泛应用于网页布局中，例如：

导航栏
弹出窗口
图片或视频的中心展示

示例代码

以下是使用 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 Centering</title>
    <style>
        #container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #centered-div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 200px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="container">
        <div id="centered-div">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>