Expand div from center of the body using jQuery

Question

How could I expand / grow a div from center? It currently expands from top left to bottom right. Here's a jsFiddle .

<div class="growme">test</div>

$('.growme').animate({
    width: '100%',
    height: '100%',
    opacity: 1,
}, 'normal');

.growme {
    background-color: #990000;
    height: 0;
    width: 0;
    position: absolute;
    filter: alpha(opacity=0);
    opacity: 0;
}

Answer 1

Try this make your .growme class center of the body. by adding top, left,bottom and right as 0.

 $('.growme').animate({ width: '100%', height: '100%', opacity: 1, }, 'normal'); 

 .growme { background-color: #990000; height: 0; width: 0; position: absolute; filter: alpha(opacity=0); opacity: 0; top:0; left:0; bottom:0; right:0; margin:auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="growme">test</div> 

**

OR

**

You can also use transition for the same.

 $('.growme').animate({ width: '100%', height: '100%', opacity: 1, }, 'normal'); 

 .growme { top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); margin: auto; background-color: #990000; position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="growme">test</div>