How to implement HTML structure according to BEM?

Question

Layout

Hello! I ran into a problem: is it possible to create an element in a block that centers all the content of this block? Did it this way:

<div class="page__header">
    <div class="page__wrapper">
      <header class="header">
        <div class="header__left-content">
          <div class="logo">
            <!-- Logo -->
          </div>
        </div>
        <div class="header__right-content">
          <ul class="nav">
            <!-- Li -->
          </ul>
          <div class="header__search">
            <!-- Input -->
          </div>
        </div>
      </header>
    </div>
  </div>

It would be possible to reduce the nesting if we put the header__wrapper inside the header block, but is this structure correct?

Answer 1

Why create an element when you can create a block modifier?
<div class="header header--center"></div>

Answer 2

<div class="page__wrapper">
      <header class="header page__header">
        <div class="header__left-content">
          <div class="logo">
            <!-- Logo -->
          </div>
        </div>
        <div class="header__right-content">
          <ul class="nav">
            <!-- Li -->
          </ul>
          <div class="header__search">
            <!-- Input -->
          </div>
        </div>
      </header>
    </div>
  </div>

All this can be done using mixes, and not through a modifier, because the appearance is configured through the modifier, not positioning.