如何用 jQuery 将 `<div>` 精准居中于屏幕，解决你的居中烦恼？

2024-03-03 22:46:15

使用 jQuery 将 <div> 精准居中于屏幕

身为开发者，你一定遇到过需要将 <div> 元素居中显示于屏幕的需求。本文将一步步指导你如何使用 jQuery 轻松实现这一需求，让你彻底掌握这项技巧。

获取元素尺寸

首先，我们需要获取 <div> 元素的高度和宽度，以便计算居中位置。

var divHeight = $("#myDiv").height();
var divWidth = $("#myDiv").width();

计算屏幕尺寸

接下来，获取当前浏览器窗口的高度和宽度，这将作为我们计算居中位置的基础。

var windowHeight = $(window).innerHeight();
var windowWidth = $(window).innerWidth();

计算居中偏移量

为了将 <div> 元素居中，我们需要计算垂直和水平偏移量。

var verticalOffset = (windowHeight - divHeight) / 2;
var horizontalOffset = (windowWidth - divWidth) / 2;

设置居中样式

最后，使用 jQuery 的 css() 方法设置 <div> 元素的 margin-top 和 margin-left 样式，使其居中显示。

$("#myDiv").css({
  "margin-top": verticalOffset + "px",
  "margin-left": horizontalOffset + "px"
});

代码示例

将所有代码片段整合起来，得到完整的解决方案：

var divHeight = $("#myDiv").height();
var divWidth = $("#myDiv").width();

var windowHeight = $(window).innerHeight();
var windowWidth = $(window).innerWidth();

var verticalOffset = (windowHeight - divHeight) / 2;
var horizontalOffset = (windowWidth - divWidth) / 2;

$("#myDiv").css({
  "margin-top": verticalOffset + "px",
  "margin-left": horizontalOffset + "px"
});