html - flexbox 仅垂直对齐

Question

我在当前垂直和水平居中的父 div 中有一个子 div：

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>

我想删除水平居中的孩子，只让它垂直居中。

jsfiddle

标签： htmlcssflexboxcenter