Align a vertical centered flex element to the right

Question

I have a div that is vertically centered using flex box. But is there now any way to align it to the right?

Answer 1

One option would be to add justify-content: flex-end to the flexbox container: (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>

---

Alternatively, you could also add margin-left: auto to the flexbox item: (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>