Question: I would like to center a `div` by clicking it. So if I'm clicking a `div` I want it to scroll to the center of the browser viewport. I don't want to use anchor points like the guides and examples I've seen. How can I achieve this?

Answer: 
I know this question is old, but right now, you can use [scrollIntoView](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView):

For example:

```js
document.body.scrollIntoView({
  behavior: 'smooth',
  inline: 'center',
  block: 'center'
});

```
I've got one slight modification to offer.  

If the "adjustment factor" i.e. `( $(window).height() - $(this).outerHeight(true) ) / 2` is `< 0` you can get undesirable results whereby you overshoot that element in the viewport with your scroll.

I added a `max(0,adjustment factor)` to correct :

```
    function scrollIntoView(el) {

        var offsetTop = $j(el).offset().top;
        var adjustment = Math.max(0,( $j(window).height() - $j(el).outerHeight(true) ) / 2);
        var scrollTop = offsetTop - adjustment;

        $j('html,body').animate({
            scrollTop: scrollTop
        }, 200);
    }

```