Vertically align a radial gradient - css

Question

I've setup the following jsfiddle = https://jsfiddle.net/gfxjwuao/
.skeleton-yqjgac1o2g6:empty {
height: 133px;
background-color: red;
border-radius: 0px 0px 0px 0px;
background-image: radial-gradient( circle 20px at 20px 20px, #F5F7F9 19px, transparent 20px );
background-repeat: repeat-y;
background-size: 40px 133px;
background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>
All I want to do is vertically align the circle. I can horizontally center it all fine, but it just seems to ignore it vertically. Any ideas?
Using background-position: center center is ignored.

Answer 1

Tried it like this, changing the coordinates of radial-gradient to "center":
.skeleton-yqjgac1o2g6:empty {
height: 133px;
background-color: red;
border-radius: 0px 0px 0px 0px;
background-image: radial-gradient( circle 20px at center, #F5F7F9 19px, transparent 20px );
background-repeat: repeat-y;
background-size: 40px 133px;
background-position: center center;
}
<div class="skeleton-yqjgac1o2g6"></div>
Just a noob, though.
Can't really explain it.

Answer 2

Just change background-image radial graidient y to 50%. or just copy paste answer below and look for reasoning by yourself. :)
.skeleton-yqjgac1o2g6:empty {height: 133px; background-color: red; border-radius: 0px 0px 0px 0px; background-image: radial-gradient( circle 20px at 20px 50%, #F5F7F9 19px, transparent 20px );background-repeat: repeat-y;background-size: 40px 133px;background-position: 50% 50%;vertical-align: center;}