CSS невозможно выровнять vert / horz и img в абсолютном

Question

У меня есть следующая проблема, где я хочу переместить lo go в положение, показанное на рисунке

Я могу переместите изображение, используя такие свойства, как:

    .img-logo{
      display:flex;
      position: absolute;
      text-align: center;
      align-items: center;
      justify-content: center;
      left: 50%

    }

Но дело в том, что это не точные значения, я не знаю, как сделать это с точными значениями

Потому что, если я использую

    .img-logo{
  display:flex;
  position: relative;
  text-align: center;
  align-items: center;
  justify-content: center;

}

Изображение даже не двигается

htlm похож на это

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

где .main

   .main { height: 100%; }
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;

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

Исправлено

   <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%); }