Как выровнять значок меню?

Подскажите, пожалуйста, как выровнять значок меню по вертикали?

.header-outher {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
}

.header-menu {
  width: 33%;
  display: flex;
}

.header-logo {
  display: flex;
  width: 33%;
  font-size: 60px;
}

.header-logo span {
  width: 100%;
  text-align: center;
}

.header-options {
  display: flex;
  width: 33%;
  margin: auto 0;
}

.options-list {
  width: 100%;
  text-align: right;
}

.header-options li {
  display: inline;
}

.header-collection {
  display: block;
  width: 100%;
  text-align: center;
}

.header-collection li {
  display: inline;
}

.menu-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  overflow: hidden;
}

.menu-btn span {
  width: 20px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #000;
}

.menu-btn span:nth-of-type(2) {
  top: calc(50% - 7px);
}

.menu-btn span:nth-of-type(3) {
  top: calc(50% + 7px);
}

.hide-menu {
  display: block;
}
<header>
  <div class="header-content">
    <div class="header-outher">
      <div class="header-menu">
        <div class="menu-btn">
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <div class="header-logo">
        <span>Shop</span>
      </div>
      <div class="header-options">
        <ul class="options-list">
          <li> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg> </li>
          <li><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg></li>
          <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></li>
          <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
  <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></li>
        </ul>
      </div>
    </div>
    <div class="header-collection">
      <ul class="collection-list">
        <li>Новинки</li>
        <li>Акции</li>
        <li>Хиты продаж</li>
      </ul>
    </div>
    <div class="hide-menu">
      <h1>меню</h1>
      <ul class="first-list">
        <li class="list-title">Верхнее меню</li>
        <li>
          <a href="#" class="list-item">Каталог</a>
        </li>
        <li>
          <a href="#" class="list-item">О Компании</a>
        </li>
        <li>
          <a href="#" class="list-item">Контакты</a>
        </li>
        <li>
          <a href="#" class="list-item">Доставка</a>
        </li>
        <li>
          <a href="#" class="list-item">Оплата</a>
        </li>
        <li>
          <a href="#" class="list-item">Личный кабинет</a>
        </li>
      </ul>
      <ul class="contact-list">
        <li class="list-title">Контакты</li>
        <li class="list-item">+7(800)800-80-80</li>
        <li class="list-item">г. Москва, ул. Новорязанская, 18, стр. 11</li>
      </ul>
      <ul class="social-list">
        <li>Инстик</li>
        <li>Телега</li>
        <li>Ютуб</li>
        <li>Вк</li>
        <li>Твитер</li>
      </ul>
    </div>
  </div>
</header>


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

Автор решения: tomato-magnet-regulato

Способов много, один из них

.header-outher {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
}

.header-menu {
  width: 33%;
  display: flex;
}

.header-logo {
  display: flex;
  width: 33%;
  font-size: 60px;
}

.header-logo span {
  width: 100%;
  text-align: center;
}

.header-options {
  display: flex;
  width: 33%;
  margin: auto 0;
}

.options-list {
  width: 100%;
  text-align: right;
}

.header-options li {
  display: inline;
}

.header-collection {
  display: block;
  width: 100%;
  text-align: center;
}

.header-collection li {
  display: inline;
}

.menu-btn {
  width: 30px;
  height: 30px;
  position: absolute;
  overflow: hidden;
}

.menu-btn span {
  width: 20px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #000;
}

.menu-btn span:nth-of-type(2) {
  top: calc(50% - 7px);
}

.menu-btn span:nth-of-type(3) {
  top: calc(50% + 7px);
}

.hide-menu {
  display: block;
}

/*  */
.span_capcan {
  margin-top: 1em;
}
<header>
  <div class="header-content">
    <div class="header-outher">
      <div class="header-menu">
        <div class="span_capcan">
          <div class="menu-btn">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="header-logo">
        <span>Shop</span>
      </div>
      <div class="header-options">
        <ul class="options-list">
          <li> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg> </li>
          <li><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
  <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg></li>
          <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></li>
          <li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
  <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></li>
        </ul>
      </div>
    </div>
    <div class="header-collection">
      <ul class="collection-list">
        <li>Новинки</li>
        <li>Акции</li>
        <li>Хиты продаж</li>
      </ul>
    </div>
  </div>
</header>

→ Ссылка