Center a DIV when animating - html

Question

I making a animation on set of DIV's which are wrapped inside div with id="wrapper"
using CSS3.
However if I hover on the rounded box, the animation is left aligned but not center aligned.
The URL for the code is #http://jsfiddle.net/X5Ycu/
<div id="wrapper">
<div class="roundedbox"></div>
<div class="ball"> </div>
<div class="greenball"> </div>
<div class="redball"> </div>
<div class="greenleaf"> </div>
<div id="pacman"> </div>
</div>
Thanks & Regards
Alex

Answer 1

change the blocks from inline-block to display: block
add margin 0 auto
remove the position absolute
quick fiddle here
http://jsfiddle.net/ktcle/X5Ycu/2/
#wrapper{
position:relative;
width: 400px
}
.roundedbox{
position:relative;
width:75px;
height: 75px;
background-color: pink;
display: block;
text-align: center;
margin: 10px auto;
border-radius:10px;
transition-property:border-radius width;
transition-duration:2s;
transition-timing-function:linear;
}

Answer 2

Try below:
div.roundedbox:hover{
width:100px;
left: 137.5px; //Add this line
}

Answer 3

You can add margin applied effect like TOP and BOTTOM also RIGHT and LEFT to these two applied to half the original size
see that example: http://jsfiddle.net/X5Ycu/1/
.limeball{
margin: 0px; // original margin
width: 100px; //original width
height: 50px; //original height
}
.limeball{
width: 0px;
height:0px;
margin: 25px 50px;
// margin results:
// (original width) / 2 = 50px (LEFT AND RIGHT)
// (original height) / 2 = 25px (TOP AND BOTTOM)
}

Answer 4

Well, if you use modern CSS as you say, then you could specify:
left: 50%; /* or figure out where the center is */
And then just move the element to its half size to the left, which you can do using transform:
transform: translateX(-50%);
So now, even when your element is changing its size, also its position (translation) will change according to its size. This (the translation) will always work, regardless of how your element is positioned or displayed.
You will surely need to use some vendor prefixes.