Animate div from center of it

Question

I have a div that pops up when a certain action appears. Instead of just popping up, I animated it so it appears to grow in size when the event happens. This is nice and all, but I would like it to instead of animating from the top left corner of the div, I want it to animate from either the center of the div, or the center-top of the div. How would I achieve this by using just Javascript and jQuery?

Below is what I have as of now.

var newsPopup = $('#news-container');
slideIntoHub(newsPopup);

// Slides any HTML object into the hub by animations
function slideIntoHub(object) {
    removeHubContents();
    object.css({'height' : '0', 'width' : '0'});
    object.appendTo('#hub');
    object.animate({width: '500', height: '200'}, 1000);
}
// Removes everything from #hub
function removeHubContents() {
    var hub = $('#hub');
    hub.children().each(function() {
        $(this).detach();
    });
}

#news-container {
    background-color: white;
    border: 15px gray outset;
    border-radius: 50px;
    padding: 10px;
}
.news-firstRow {
    width: 100%;
    display: inline-block;
}
.news-icon {
    display: inline-block;
    margin: 0 auto;
    padding-right: 50px;
    vertical-align: middle;
}
.news-title {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}
.news-secondRow {
    width: 100%;
    display: inline-block;
}
.news-thirdRow {
    width: 100%;
    display: inline-block;
}
.news-publishedDate {
    float: right;
    padding-bottom: 10px;
    font-size: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hub">
                    <div id="news-container">
                        <div class="news-firstRow">
                            <div class="news-title">
                                <h3>Sales booming</h3>
                            </div>
                        </div>
                        <div class="news-secondRow">
                            <div class="news-description">
                                <p>The team is coming up with more products everyday</p>
                            </div>
                        </div>
                        <div class="news-thirdRow">
                            <div class="news-publishedDate">
                                <p>Published on: 3-29-2017</p>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

Try css3 transform: scale property for the best results

$(document).ready(function(){
  $('button').on('click', function(){
    $('div').toggleClass('scale-it');
  })
});

div{
  height: 150px;
  width: 150px;
  border: 5px solid crimson;
  transform: scale(0);
  transition: 0.5s ease-in-out all;
}
.scale-it{
  transform: scale(1);
  }

<button>click</button>
<div></div>

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

Answer 2

you could try this. heres the fiddle http://jsfiddle.net/FQwYJ/260/ . This makes the animation start at the top center.

object.css({'height' : '0', 'width' : '0', 'margin-left':'250px'});
object.appendTo('#hub');
object.animate({width: '500', height: '200','margin-left':'0'},

the following animates from center of the div itself. http://jsfiddle.net/FQwYJ/261/

object.css({'height' : '0', 'width' : '0', 'margin-
left':'250px','margin-top':'100px'});
object.appendTo('#hub');
object.animate({width: '500', height: '200','margin-left':'0','margin-
top':'0'}, 1000);

you could take your pick of which one to use.