只需将您的位置更改为固定（使用视口）：

  .growme {
 background-color：＃990000; 
 height：0; 
 width：0; 
位置：固定; 
 filter：alpha（opacity = 0）; 
 opacity：0; 
 top：0; 
剩下：0; 
 bottom：0; 
 right：0; 
 margin：auto; 
} 
 

以下是一个演示： http://jsfiddle.net/w5w8orvp/

I have a question before wherein I wanted to expand a div from the center of the body. It works fine not until I encountered this scenario wherein the content of the body is long enough that a scroll bar now shows.

Notice on this jsFiddle that when I scroll to a little to the bottom or just halfway then clicked anywhere on the page, the expanded div is displayed at the very top of the page.

I know this CSS code below has something to do with it:

.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;
}

How could I make the div expand right exactly at the view port regardless of where I scroll?

Just change your position to fixed (which uses the viewport):

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

Here is a demo: http://jsfiddle.net/w5w8orvp/