Vertically centre and right align absolutely positioned child element in a flex container

Submitted by root on

The referenced media source is missing and needs to be re-embedded.

 

This should be centered
Earth from Space

HTML

<div class="container">
<div class="text">This should be centered</div>
<img src="/sites/default/files/2022-11/hurley-near-maidenhead.jpg" />
</div>

CSS

<style type="text/css">

/* flex container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: green;
  height: 100%;
  width: 100%;
  min-width: 250px;
}

/* child element */
.text_221 {
  position: absolute;
  background: red;
}
</style>