Align the vertical centered flex to the right

Question

I have a div that is vertically centered using a flex box. But is there a 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 can also add margin-left: auto to the flexbox: element (example) p>

 .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>