How to center an element inside flex container, without creating extra html element

Question

Here is the result of my work and the code.

header {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.title {
  align-self: center;
}

<header>
  <h1 class='title'>center</h1>
  <span class='share'>
        <h6>left!</h6>
    </span>
</header>

I want to center the h1 tag, is it even possible with flex?

Answer 1

You can try this

   .title {
        text-align: center;
        width: 100%;
      }

remove align-self