```css
#main {
  border: 2px blue solid;
  width: 100%;
}

#photo {
  display:flex;
  align-items: center;
  justify-content: center;
}

#photo > #large {
  width:70%;
  margin: 20px 0px;
  border: 3px red solid;
}

#small {
  position: absolute;
  width:150px;
  left:0px;
}
```

```html
<div id="main">
    <div id="photo">
        <img src="image/test.jpg" id="large">
        <img src="image/sale.jpg" id="small">
    </div> 
</div>
```

Above is my code. What I want is for the large image to be centered in photo div and the small image to be set to absolute and positioned relative to large image.

How can I do that?

Right now the small image is relative to main div.