jquery 水平居中

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。

水平居中的优势

水平居中可以使页面元素在视觉上更加平衡和美观，提升用户体验。

类型

水平居中有几种常见的方法：

使用 CSS Flexbox
使用 CSS Grid
使用绝对定位和 transform
使用 margin 自动

应用场景

水平居中广泛应用于各种网页布局中，如导航栏、标题、按钮、图片等。

示例代码

以下是使用 jQuery 和 CSS 实现水平居中的几种方法：

方法一：使用 CSS Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Centering</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            height: 100vh;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="centered">Centered Content</div>
    </div>
</body>
</html>

方法二：使用 CSS Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Centering</title>
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 100vh;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="centered">Centered Content</div>
    </div>
</body>
</html>

方法三：使用绝对定位和 transform

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Centering</title>
    <style>
        .container {
            position: relative;
            height: 100vh;
        }
        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="centered">Centered Content</div>
    </div>
</body>
</html>

方法四：使用 margin 自动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horizontal Centering</title>
    <style>
        .container {
            text-align: center;
            height: 100vh;
        }
        .centered {
            display: inline-block;
            margin: 0 auto;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="centered">Centered Content</div>
    </div>
</body>
</html>