如何使用javascript和css边距垂直和水平居中div？答案

【问题标题】：How to vertically and horizontally center a div using javascript and css margin?如何使用javascript和css边距垂直和水平居中div？
【发布时间】：2021-02-05 16:00:59
【问题描述】：

我目前正在尝试仅使用 javascript（无 css 中心属性）将图像中的矩形居中。然而，即使数字是正确的，显示也是错误的。为此，我使用以下代码：

$(document).ready(function() {
    
    $(".img-zoom-container").css("width", $("#myimage").width());
    $(".img-zoom-container").css("height", $("#myimage").height());
    
    $("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
    $("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
    $("#lens_container").css("top", ($("#lens").height() / 2));
    $("#lens_container").css("left", ($("#lens").width() / 2));
    
});

.img-zoom-container
{
    border: 1px solid red;
}

#lens
{
    border: 1px solid white;
    width: 50px;
    height: 50px;
    position: absolute;
}

#lens_container
{
    border: 1px solid cyan;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
    <div id="lens"></div>
    <div id="lens_container"></div>
    <img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>

我要居中的项目是#lens_container div（在屏幕上显示为蓝色）。我还有一个大小为 50 像素 x 50 像素的白色正方形 (#lens div)。我想居中并调整蓝色矩形的大小，以便在蓝色矩形的每一侧都有一半的正方形宽度，并且与高度相同。但是，正如您在尝试代码时看到的那样，尽管数学是正确的，但事实并非如此。

我不知道你是否能理解我的需求，但我非常感谢那里的帮助。

提前致谢。

【问题讨论】：

是的，我意识到这一点。如果你提到我说不使用 CSS，我的意思是不使用任何 CSS 中心属性。
为什么？这正是 CSS flexbox is for 所使用的，并且多年来一直如此，它甚至不需要任何人打开 JS。
请问为什么？因为窗口调整大小使该定位不再相关，所以您需要重新计算和调整。
因为我需要蓝色矩形相对于白色正方形居中和调整大小。如果可以直接使用一些漂亮的 css 属性来做这 2 件事，我不会反对尝试它们。而对于窗口调整大小，这是我没有考虑到的问题。
您的代码输出似乎在代码 sn-p 中运行良好（一旦我给它一个真实的图像）。您可以单击“运行代码sn-p”按钮亲自查看。你到底有什么问题？

标签： javascript css dom

【解决方案1】：

有两个问题：

首先，position: absolute 表示将项目“定位到其最近的定位祖先，如果有的话；否则，它相对于初始包含块放置”（reference）。父元素“.img-zoom-container”未定位。初始容器块是<body>，默认情况下有一些填充。

因此，您的 #lens_container 相对于 iframe 的 <body> 定位，这可能不是您所期望的。此外，<body> 默认具有非零填充大小。如果您只是使用 CSS 将所有内容定位到 top: 0 和 left: 0，您可能会看得更清楚：

body {
    background-color: rgba(0, 0, 0, 0.1);
}

.img-zoom-container
{
    border: 1px solid red;
    width: 600px;
    height: 160px;
}

#lens
{
    border: 1px solid white;
    width: 50px;
    height: 50px;

    position: absolute;
    top: 0;
    left: 0;
}

#lens_container
{
    border: 1px solid cyan;
    width: 550px;
    height: 110px;

    position: absolute;
    top: 0;
    left: 0;
}

<div class="img-zoom-container">
    <div id="lens"></div>
    <div id="lens_container"></div>
    <img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>

要使#lens 和#lens_container 都相对于.img-zoom-container 定位，您必须给.img-zoom-container 一个“位置”值，以便它可以是“位置祖先”：

$(document).ready(function() {
    
    $(".img-zoom-container").css("width", $("#myimage").width());
    $(".img-zoom-container").css("height", $("#myimage").height());
    
    $("#lens_container").css("width", ($("#myimage").width() - $("#lens").width()));
    $("#lens_container").css("height", ($("#myimage").height() - $("#lens").height()));
    $("#lens_container").css("top", ($("#lens").height() / 2));
    $("#lens_container").css("left", ($("#lens").width() / 2));
    
});

.img-zoom-container
{
    border: 1px solid red;
    position: relative; /** this line **/
}

#lens
{
    border: 1px solid white;
    width: 50px;
    height: 50px;
    position: absolute;
}

#lens_container
{
    border: 1px solid cyan;
    position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="img-zoom-container">
    <div id="lens"></div>
    <div id="lens_container"></div>
    <img id="myimage" src="https://via.placeholder.com/600x160.png?text=Testing Image" alt="">
</div>

仍然有 1-2 像素的偏差。那是因为您没有考虑边框宽度（您的第二个问题）。一旦你清醒头脑并考虑你希望边框宽度如何表现，你会得到更好的结果。

【讨论】：

【解决方案2】：

根据其容器，您可以在 div 上设置一个 ID，例如：

内容。

然后在 javascript 中，如果有一个事件将其居中，您可以制作如下函数：

function centerDivItem() {
    document.getElementById("id1").style.alignContent = "center"
}

然后，正如我所说，从另一个地方调用它。

【讨论】：