flexbox align vertical only

Question

I have a child div inside a parent div that is currently centered vertically and horizontally:

CSS

.parent {
    height: 100vh;
    background: #e1e1e1;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
}

.child {
    width: 300px;
    height: 50px;
    background: blue;
}

HTML

<div class="parent">
    <div class="child">
        <p>Content</p>
    </div>
</div>

I would like to remove the child being centered horizontally and just have it centered vertically only.

jsfiddle