Centered Vertical line with CSS Gradient

dabblet.css

/**
 * Centered Vertical line with CSS Gradient
 */
div {
    background: #fff;	
    background: linear-gradient(180deg, transparent, #353535, transparent);
    background-position: 50%;
    background-repeat: repeat-y;
    background-size: 1px auto;
}

/* Setup */
div {
    border: 1px solid #ccc;
    height: 300px;
    width: 90%;
}

dabblet.html

<div></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}

background: linear-gradient(180deg, $line-color, $line-color);

it's the same without "dashed" problem when user zoom