CSS unable to align vert/horz an img positioned in absolute - css

Question

I have the following issue, where I want to move the logo to the position shown in the picture
Im able to move the image around using properties like:
.img-logo{
display:flex;
position: absolute;
text-align: center;
align-items: center;
justify-content: center;
left: 50%
}
But the point is, those are not exact values, I dont know how to do it with exact values
Because if I use
.img-logo{
display:flex;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
}
The image wont even move
The htlm is like this
<div class="main">
<form class='login-form' onSubmit={this.handleSubmit}>
<img alt="image" src={brand} width="60" height="60" class="img-logo"/>
<p class='lf--upper-text' >Welcome to app</p>
<div class="flex-row">
<label class="lf--label" htmlFor="email">
<svg x="0px" y="0px" width="12px" height="13px">
where .main
.main { height: 100%; }
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
and .login-form
.login-form {
width: 100%;
padding: 2em;
position: relative;
background: white;
border-radius: 30px;
#media screen and (min-width: 600px) {
width: 50vw;
max-width: 15em;
}
}

Answer 1

Fixed it
<div class="flex-row img-logo">
<img src={brand} width="60" height="60" class="img-logo-in" />
</div>
css
.img-logo{
display:flex;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
bottom: 20%
}
.img-logo-in{
position:absolute;
left:50%;
transform:translate(-50%); }