Question

我想要duplicate what this guy did，但不使用画布。我希望在页面的中心有一个div，只需每秒将宽度/高度/边框半径增加10px。这很好用，但由于某种原因，div越大，它越往右下方移动。圆圈并没有停留，它的中心位置随着变大而变化。如何在不改变位置的情况下更改div的宽度/高度？

的main.css

div {
  background-color: green;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px; /* this is half the height of your div*/  
  margin-left:-100px; /*this is half of width of your div*/
}

的index.html

<!DOCTYPE html>
  <head>
    <title>CircleTime</title>
    <link rel="stylesheet" href="main.css"></link>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
  <div></div>
  </body>
</html>

app.coffee

incrementCircle = ->
  newSize = circle.height() + 10
  circle.height newSize
  circle.width newSize
  circle.css 'border-radius', newSize

$(document).ready ->
  window.circle = $("div")
  setInterval(incrementCircle, 1000);

Answer 1

您是否也在更改边距？

margin-top:-50px; /* this is half the height of your div*/    
margin-left:-100px; /*this is half of width of your div*/

只需将其添加到您的incrementCircle

即可

circle.css 'margin', -(newSize/2) + 'px, 0px, 0px, ' + -(newSize/2) + 'px'

Answer 2

在你的coffeescript中，不断更新边距：

incrementCircle = ->
newSize = circle.height() + 10
circle.height newSize
circle.width newSize
circle.css 'border-radius', newSize
circle.css 'margin-top', newSize/-2
circle.css 'margin-left', newSize/-2

$(document).ready ->
  window.circle = $("div")
  setInterval(incrementCircle, 1000);

http://jsfiddle.net/sw0zn36e/5/

Answer 3

这可能是一个问题。

试试这个：

div {
  background-color: green;
  width: 100px;
  height: 100px;
  border-radius: 100px;
  margin: 0 auto;
}

Answer 4

切换到margin: 0 auto;有效。请参阅此codepen：http://codepen.io/anon/pen/myWBZW

如何在不改变位置的情况下改变div的宽度/高度？

4 个答案: