在调整大小的同时保持div中心位置

问题描述：

我想创建一个圆形div，当鼠标放在它上面时会变得更大（并停在鼠标上），但我似乎无法让它保持绝对居中在页面中当在调整大小的同时保持div中心位置

function addwidth() { 
 
    if ($(".circle").width() >= 550) { 
 
    $(".circle").width(100); 
 
    $(".circle").height(100); 
 
    $('.question input').val("1"); 
 
    $(".circle").css("background-color", "red"); 
 
    $(".circle").css("margin", "450px"); 
 
    } else { 
 

 
    $(".circle").width($(".circle").width() + 5); 
 
    $(".circle").height($(".circle").height() + 5); 
 
    $(".circle").css('margin', function(index, curValue) { 
 
     return parseInt(curValue, 10) + -5 + 'px'; 
 
    }); 
 
    if ($(".circle").width() > 99) { 
 
     $('.question input').val("1"); 
 
     $(".circle").css("background-color", "red"); 
 
    } 
 
    if ($(".circle").width() > 199) { 
 
     $('.question input').val("2"); 
 
     $(".circle").css("background-color", "orange"); 
 
    } 
 
    if ($(".circle").width() > 299) { 
 
     $('.question input').val("3"); 
 
     $(".circle").css("background-color", "yellow"); 
 
    } 
 
    if ($(".circle").width() > 399) { 
 
     $('.question input').val("4"); 
 
     $(".circle").css("background-color", "green"); 
 
    } 
 
    if ($(".circle").width() > 499) { 
 
     $('.question input').val("5"); 
 
     $(".circle").css("background-color", "blue"); 
 
    } else {} 
 
    } 
 
}; 
 

 

 
var intervalId; 
 

 
function expand() { 
 
    if (intervalId) { 
 
    clearInterval(intervalId); 
 
    } 
 
    intervalId = setInterval(addwidth, 15); 
 
}; 
 

 
function stopexpand() { 
 
    clearInterval(intervalId); 
 
};

#container1 { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.circle { 
 
    background-color: black; 
 
    margin: 450px; 
 
    border-radius: 50%; 
 
    behavior: url(PIE.htc); 
 
    width: 100px; 
 
    height: 100px; 
 
    max-width: 550px; 
 
    max-height: 550px; 
 
}

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
 
<div id="container1"> 
 
    <div class="circle" onmousedown="return expand()" onmouseup="return stopexpand()"></div> 
 
    <div class="question"><input type="number"></div> 
 
</div>

我如何能确保圆向外扩展而不是向上或跨任何想法？（如果这是有道理的）

你想要[this]（https://jsfiddle.net/3Lykkpr1/）吗？ – Huelfe

我希望它从中心向外扩展。因此，如果我点击圆圈中间的位置，它会长大，但我的鼠标似乎仍然位于圆心的中心，而不是向外扩展的圆，鼠标位于圆的边缘。 – silverbackjack

答

尝试在container1 CSS使用Flexbox的：

#container1 { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
    width: 100vw; 
 
}

这有效，但似乎掩盖了使它更像一个鸡蛋形状的圆：编辑，这只会发生在屏幕大小调整后，它似乎在大多数情况下工作得很好。谢谢 – silverbackjack

我的下一步行动是调整容器的高度和宽度，但至少现在这个圆形正在扩大。 – Nick

答

我不知道，如果是一个圆圈有什么关系呢。但我知道，这是你如何居中在页面上一个div（或其他容器，像另一个DIV），提供：

你的尺寸的股利，无论是与“PX”或“％”（两个工作）。

从您的文章，好像你确实大小的DIV，并且希望它留在页面中央（不居中相对于鼠标）绝对的。如果这是真的，我就是这样做的（当我最初找到这个解决方案时，我就像是......真的就是这样吗？）。

.centerDiv { 
    margin: auto; 
    position: relative; 
}

再次，这假定您已经大小的DIV，和我可能会也把它放在另一格大小的100％（水平/垂直或两者兼而有之，这取决于你想做什么）。

我在那里无处不在，例如，在“app-component”初始化之前，将“加载”div集中在Angular2应用程序中。

有了这个，你应该能够调整你想要居中的div，并且它会继续自我调整。

让我知道这是否有任何帮助（对圆圈事物感兴趣），如果没有，我会拉下答案，但这确实是我如何去做的。

在调整大小的同时保持div中心位置

相关推荐