css – 将垂直居中的flex元素对齐到右侧

一种选择是将justify-content：flex-end添加到flexbox容器： (example)

.parent {
    display: flex;
    width: 200px;
    height: 200px;
    border: 1px solid;
    align-items: center;
    justify-content: flex-end;
}
.parent > .child {
    width: 50%;
    height: 50%;
    border: 2px solid #f00;
}

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

或者,您也可以将margin-left：auto添加到flexbox项目：(example)

.parent {
    display: flex;
    width: 200px;
    height: 200px;
    border: 1px solid;
    align-items: center;
}
.parent > .child {
    width: 50%;
    height: 50%;
    border: 2px solid #f00;
    margin-left: auto;
}

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