I'm trying to animate a box to the center of the screen's width using jquery with .css that will respond to browser size adjustment but I can't seem to get it to respond right in the center without refreshing the browser. Here's the code:
<div class="box"></div>
.box {
position: absolute;
border: 1px solid red;
width: 300px;
height: 300px;
}
$(function(){
$(".box").css({left: $(window).width() / 2 - $(".box").width() / 2})
.animate({left: '-=0%', top: '100px'},700);
});
I tried using .css({left:'50%'})
that will respond to browser size but now the box is not centered.
Based on my understanding of your problem as I mentioned in comments, this is a solution that you can use.
Reference: Centering Percentage Width/Height Elements.