Как расположить картинку по середине

Question

Всем доброго времени суток, долго мучаюсь с этой картинкой, подскажите пожалуйста как сделать так, чтобы картинка расположилась по середине контейнера, как на скрине, из-за того что сталкивается с div'ом, не получается сделать так как нужно. Первый скрин, то как должно быть, второй как выглядит сейчас.

.webName{
    margin: 0;
    padding: 0;
}

body {
    background-color: #ECF6F1;
}

.container {
    display: flex;
    width: 76.5625%;
    margin: auto;
    height: 701px;
    border: 1px black solid;
}


.logo-container {
    display: flex;
    vertical-align: middle;
    border: 1px solid black;
    width: 46.5625vw;
    height: 6.09375vw;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 5.208333333333333vw;
    line-height: 6.379498364231189vw;
    color: #32D586;
}


.nameAndDescription {
border: 1px solid red;
    width: 46.5625vw;
    height: 17.1875vw;
}


.tengeInCircle {
    display: flex;
    margin-top: 1.2%;
    width: 4.85278080697928vw;
    height: 4.85278080697928vw;
    border: 1px solid black;
}

.webName {
    margin-left: 9px;
}

.describe-container {
    margin-top: 18px;
    border: 1px solid black;
    font-family: 'Roboto Condensed';
    width: 83.1096196868009%;
        font-style: normal;
        font-weight: 400;
        font-size: 2.6041666666666665vw;
        line-height: 3.0729166666666665vw;
        color: #404040;
}

.picture {
    z-index: 99;
    display: flex;
    border: 1px black solid;
    width: 33.673469387755105%;
    height: 59.56062767475036%;
}

.offer {
    z-index: 99;
    display: flex;
    width: 33.673469387755105%;
    height: 59.56062767475036%;
}

.registration-window {
    width: 34.14965986394558%;
    height: 63.62339514978602%;
    background-color: white;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
      rel="stylesheet"
    />
    <title>Регистрация</title>
  </head>
  <body>
    <div class="container">
      <div class="nameAndDescription">
        <div class="logo-container">
          <img class="tengeInCircle" src="images/img1.png" alt="LOGO" />
          <span class="webName">ENTERPRENEUR.KZ</span>
        </div>
        <div class="describe-container">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue
          dolor, pulvinar ut convallis.
        </div>
      </div>

      <img class="offer" src="images/img2.png" alt="OFFER" />

      <div class="registration-window"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Answer 1

Предлагаю Вас сделать с помощью ::after

        .webName{
    margin: 0;
    padding: 0;
}

body {
    background-color: #ECF6F1;
}

.container {
    display: flex;
    width: 76.5625%;
    margin: auto;
    height: 701px;
}


.logo-container {
    display: flex;
    vertical-align: middle;
    width: 46.5625vw;
    height: 6.09375vw;
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    font-size: 5.208333333333333vw;
    line-height: 6.379498364231189vw;
    color: #32D586;
}


.nameAndDescription {
    width: 46.5625vw;
    height: 17.1875vw;
    position: relative;
}
.nameAndDescription::after {
    content: '';
    width: 100px;
    height: 64px;
    bottom: -53px;
    right: 0;
    position: absolute;
    background-image: url(https://cdn.pixabay.com/photo/2022/05/16/11/01/pugs-7200102_960_720.png);
    background-size: 99px 92px;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: -1; 
}


.tengeInCircle {
    display: flex;
    margin-top: 1.2%;
    width: 4.85278080697928vw;
    height: 4.85278080697928vw;
}

.webName {
    margin-left: 9px;
}

.describe-container {
    margin-top: 18px;
    font-family: 'Roboto Condensed';
    width: 83.1096196868009%;
    font-style: normal;
    font-weight: 400;
    font-size: 2.6041666666666665vw;
    line-height: 3.0729166666666665vw;
    color: #404040;
}

.picture {
    z-index: 99;
    display: flex;
    width: 33.673469387755105%;
    height: 59.56062767475036%;
}

.offer {
    z-index: 99;
    display: flex;
    width: 33.673469387755105%;
    height: 59.56062767475036%;
}

.registration-window {
    width: 34.14965986394558%;
    height: 63.62339514978602%;
    background-color: white;
}

  <div class="container">
        <div class="nameAndDescription">
            <div class="logo-container">
              <img class="tengeInCircle" src="images/img1.png" alt="LOGO" />
              <span class="webName">ENTERPRENEUR.KZ</span>
            </div>
            <div class="describe-container">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut augue
              dolor, pulvinar ut convallis.
            </div>
        </div>

        <!-- <img class="offer" src="images/img2.png" alt="OFFER" /> -->

        <div class="registration-window"></div>
    </div>

Answer 2

Непонятно зачем дали flex, это свойство даётся только родительному блоку.

.tengeInCircle {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4.85278080697928vw;
    height: 4.85278080697928vw;
}

БЛОГ НА HUSL

Как расположить картинку по середине

Ответы (2 шт):