jquery居中显示

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。居中显示通常指的是将某个元素在页面上水平垂直居中对齐。

类型与应用场景

居中显示可以分为以下几种类型：

水平居中：元素在其父容器中水平居中。
垂直居中：元素在其父容器中垂直居中。
完全居中：元素同时水平和垂直居中。

应用场景包括但不限于：

弹窗提示框
登录注册表单
图片或视频的展示框

示例代码

以下是使用 jQuery 实现不同类型居中的示例代码：

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Horizontal Center</title>
    <style>
        .container {
            width: 100%;
            text-align: center;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="centeredElement" style="display: inline-block;">Centered Content</div>
    </div>
</body>
</html>

垂直居中（使用 Flexbox）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vertical Center</title>
    <style>
        .container {
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <div id="centeredElement">Centered Content</div>
    </div>
</body>
</html>

完全居中（使用绝对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Full Center</title>
    <style>
        .container {
            position: relative;
            height: 300px;
        }
        #centeredElement {
            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 id="centeredElement">Centered Content</div>
    </div>
</body>
</html>

遇到的问题及解决方法

问题：元素未能正确居中。原因：

父容器的高度未设置或为 auto。
使用了绝对定位但未正确设置 top 和 left 属性。
CSS 样式冲突或覆盖。

解决方法：

确保父容器有明确的高度值。
检查并修正绝对定位元素的 top 和 left 属性。
使用浏览器的开发者工具检查元素的实际样式，查找可能的样式冲突。

通过上述方法，通常可以解决大多数居中显示的问题。

页面内容是否对你有帮助？

有帮助

没帮助

jQuery UI对话框位置固定居中

、、、

我试图在固定位置的页面中心以模式模式显示对话框，但我无法使其正常工作。作为一种解决办法，我当前设置了因此，至少它被固定在视口的顶部。我也尝试过将其居中到覆盖图上，但由于ui-overlay元素在初始化模态之前并不存在，所以我无法将其用作居中的archer。

浏览 5提问于2014-01-14得票数 0

1回答

使用jquery将比视区大的div居中

、

有没有可能使用jquery将比视区大的div居中，使其始终居中，而不管大小如何？我有一个2000px宽的jquery滑块，我需要将它居中，以便中心内容始终显示在1000px的主内容框架内-无论屏幕大小如何。

浏览 0提问于2013-06-07得票数 0

2回答

谷歌地图setCenter专用地图

、、、

我在jQuery UI选项卡中有谷歌地图。这意味着在用户更改选项卡之前，映射最初是隐藏的。当发生这种情况时，我在新显示的地图上触发调整大小事件，以显示瓦片并使地图正常工作。这很好用，我像这样做这部分问题是地图不在标记上居中，所以除了调用'resize'事件之外，我还需要将地图居中。但是，如何仅在新的可见容器中居中贴图，而不在其他容器中居中？我尝试在resize事件下面

浏览 0提问于2015-11-20得票数 0

2回答

jquery移动中心文本选择列表是如何实现的？

、

我需要在选择列表中居中显示文本。我发现的唯一一个做到这一点的例子是jQuery手机。我不想使用这个框架，但现在我知道它是可能的，他们怎么做呢？谢谢

浏览 0提问于2012-05-08得票数 0

回答已采纳

1回答

居中页面页面居中，从上到左

、

href="style.css" rel="stylesheet" type="text/css" />

浏览 2提问于2014-03-23得票数 0

3回答

标题中的单选按钮

、

onClick="javascript:changeMeteo()" /></div>CSS文件是： .centerFieldset {文本对齐:居中

浏览 1提问于2012-07-17得票数 0

回答已采纳

1回答

以galleria (Javascript/Jquery)问题为中心

、

目前，当涉及到居中时，我得到了这段代码width: 700px;background-color: #000; 但是，我希望画廊显示在中间，它只显示在右角，我使用jquery，画廊来自www.galleria.io但我就是不能居中画廊，有没有办法？

浏览 0提问于2013-02-22得票数 0

回答已采纳

1回答

jQuery DataTable列单元格中的中心元素

、、、

以下是我的查询结果，使用jQuery数据表在web应用程序中显示：如您所见，元素没有在列单元格内居中。所以，问题是:我如何显示元素，数字和按钮，居中？

浏览 8提问于2017-08-09得票数 2

回答已采纳

2回答

如何使用Jquery Mobile去掉这些点，这样所有的标题都可以看到？

、、

我用Jquery Mobile做了一个应用程序。我想问的是，如何去掉这些点，让所有的标题都能看到？因为当我缩小浏览器时，标题变成了圆点。我想让它变得正常。谢谢截图如下：

浏览 1提问于2012-11-12得票数 0

1回答

元素移动到查看区域的中心

、、

我在JQuery中从头开始创建了一个灯框，它工作得很好，我的问题是当你点击你想要弹出的东西时，它会在页面上的绝对位置弹出，所以如果你一直滚动到底部并点击某个东西，你必须一直向上滚动才能看到弹出的东西。pointer; } cursor: pointer; }$(document).ready(function() { $('.butt

浏览 0提问于2012-03-14得票数 0

回答已采纳

2回答

将页面围绕div居中

我想在jquery的文档体中居中放置一个div。我有一个阅读更多的按钮，当你点击它时，它会显示一个额外的div，我希望移动窗口位置围绕这个div居中。

浏览 0提问于2010-03-26得票数 1

回答已采纳

1回答

Center jQuery信息警报

、

如何在标准jQuery info通知中居中显示文本和图标？谢谢!

浏览 7提问于2011-10-03得票数 0

回答已采纳

6回答

jQuery移动弹出窗口未显示在中心位置

我正在使用jQuery手机，并试图在页面加载时显示jQuery弹出窗口。但是当页面加载时，弹出窗口不会出现在中间，相反，弹出窗口的左上角会出现在中心。

浏览 0提问于2012-12-06得票数 10

4回答

使对话框居中的jQuery UI问题

我有一个jQuery对话框，可以正确地显示和响应按钮点击。不幸的是，尽管我试图说服它，但它在浏览器窗口中总是定位在0，0。有什么想法吗？

浏览 0提问于2010-05-26得票数 2

回答已采纳

1回答

水平居中未指定数量的div？

、、、

我想实现一个添加X个元素的按钮(水平方向)，但是假设所有元素都应该居中，所以第一个div应该出现在中间，但是如果再次循环，第二个div应该出现在第一个元素的旁边，但它们必须看起来一样居中，依此类推。

浏览 1提问于2014-09-19得票数 0

1回答

jquery隐藏/显示功能

、

我只是一个jquery函数的新手，我可以完成某些div的隐藏/显示功能，但我想在执行show div时以居中的方式进行。现在这些div有一个内容，但当我单击show时，它会从左到右显示。有人能做这些把戏来居中吗？

浏览 4提问于2013-03-30得票数 0

1回答

垂直居中jQuery折叠面板

、、、

我使用创建了一个jQuery accordion。查看。它工作得很好，除了我希望手风琴在页面上垂直居中。这个想法是，随着手风琴的高度变化，DIV将不断地重新对齐，使其垂直居中。手风琴将显示为从页面中心展开，而不是从顶部向下滑动。

浏览 0提问于2012-03-24得票数 0

回答已采纳

5回答

将未知宽度和高度的div居中对齐的最好方法？

、、

假设我在我的页面上有一个div：我的CSS看起来像这样： background:red; left:50%; margin-left: ?} 正如你在上面看到的，我唯一需要知道的就是如何设置margin-left和margin-top的值。如果我有一个已知宽度和高度.center div (比方说每个300px )，我会将margin-left和ma

浏览 0提问于2013-03-16得票数 2

1回答