时间戳

首页 > 解决方案 > 如何使用javascript和css边距垂直和水平居中div？

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

问题描述

我目前正在尝试仅使用 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_containerdiv（在屏幕上显示为蓝色）。我还有一个#lens大小为 50 像素 x 50 像素的白色正方形 ( div )。我想居中并调整蓝色矩形的大小，以便在蓝色矩形的每一侧都有一半的正方形宽度，并且与高度相同。但是，正如您在尝试代码时所看到的那样，尽管数学是正确的，但情况并非如此。

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

提前致谢。

标签： javascriptcssdom

解决方案

有2个问题：

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

因此，您#lens_container的位置相对于<body>iframe，这可能不是您所期望的。此外，<body>默认情况下具有非零填充大小。如果您简单地使用 CSS 将所有内容定位到top: 0and ，您可能会看得更清楚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 像素。那是因为您没有考虑边框宽度（您的第二个问题）。一旦你清醒头脑并思考你希望边框宽度如何表现，你会得到更好的结果。

推荐阅读