在調整大小的同時保持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>

我如何能確保圓向外擴展而不是向上或跨任何想法？（如果這是有道理的）

來源

2017-03-01 silverbackjack

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

我希望它從中心向外擴展。因此，如果我點擊圓圈中間的位置，它會長大，但我的鼠標似乎仍然位於圓心的中心，而不是向外擴展的圓，鼠標位於圓的邊緣。 – silverbackjack

嘗試在container1 CSS使用Flexbox的：

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

來源

2017-03-01 14:59:58 Nick

這有效，但似乎掩蓋了使它更像一個雞蛋形狀的圓：編輯，這隻會發生在屏幕大小調整後，它似乎在大多數情況下工作得很好。謝謝 – silverbackjack

我的下一步行動是調整容器的高度和寬度，但至少現在這個圓形正在擴大。 – Nick

我不知道，如果是一個圓圈有什麼關係呢。但我知道，這是你如何居中在頁面上一個div（或其他容器，像另一個DIV），提供：

你的尺寸的股利，無論是與「PX」或「％」（兩個工作）。

從您的文章，好像你確實大小的DIV，並且希望它留在頁面中央（不居中相對於鼠標）絕對的。如果這是真的，我就是這樣做的（當我最初找到這個解決方案時，我就像是......真的就是這樣嗎？）。

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

再次，這假定您已經大小的DIV，和我可能會也把它放在另一格大小的100％（水平/垂直或兩者兼而有之，這取決於你想做什麼）。

我在那裏無處不在，例如，在「app-component」初始化之前，將「加載」div集中在Angular2應用程序中。

有了這個，你應該能夠調整你想要居中的div，並且它會繼續自我調整。

讓我知道這是否有任何幫助（對圓圈事物感興趣），如果沒有，我會拉下答案，但這確實是我如何去做的。

來源

2017-03-01 15:27:21

在調整大小的同時保持div中心位置

回答

相關問題