CSS Flex Box - Is there a way to auto align center using ::Before ::After so you can add in content

Question

This is the first time I’m wading into using CSS Flexbox instead of floats and for that matter, my CSS is a little rusty. I was wondering if there was a way of mimicking margin: 0 auto with a flexbox.

I know that align-items: center; and justify-content: center; will work normally, but in my case I have an 800px nav section that I always want to be in the center of the browser window (which would be easy using align-items: center).

The issue is that I have a background gradient after my nav section that I want to display while keeping the nav centered on the screen. I’ve tried variations of the CSS below but can only get the second code block to work.

nav {
    flex: 0 0 55em;
    height: inherit;
    margin: 0;
    padding: 0;
    background-image: url("/images/assets/gradientRL.png");
    background-position: right;
    background-repeat: no-repeat;
}

nav::before, nav::after {
    content: "";
    flex: 1 1;
}

nav::after{
background-image: url("/images/assets/gradientLR.png");
background-position: left;
background-repeat: no-repeat;
}

Below works using two divs setting the font color to transparent, but I’m hoping for a better solution. Thanks in advance - CES

nav:first-of-type {
  flex: 0 0 55em;
  height: inherit;
  margin: 0;
  padding: 0;
  text-align: right;
  background-image: url("/images/assets/gradientRL.png");
  background-position: right;
  background-repeat: no-repeat;
}

.one,
.two {
  flex: 1 1;
  color: transparent;
}

.two {
  background-image: url("/images/assets/gradientLR.png");
  background-position: left;
  background-repeat: no-repeat;
  background-color: yellow;
}

<header role="banner">
  <div class="one">x</div>
  <nav class="nav">
    hello
  </nav>
  <div class="two">x</div>
</header>

Answer 1

You can use the pseudo elements on the header instead of the extra div to accomplish that.

Here I made the header a flex row container and gave the pseudo flex: 1.

This will make the pseudo share the space left equal and push the nav to the middle.

Stack snippet

nav {
  width: 100px;
  background: lightgray;
}
header {
  display: flex;
}
header::before, header::after {
  content: ' ';
  flex: 1;
}
header::after {
  background-image: url("http://images.evansante.com/grides/gradientLR.png");
  background-position: left;
  background-repeat: no-repeat;
  background-color: yellow;
}

<header role="banner">
  <nav class="nav">
    hello
  </nav>
</header>

---

Do note, you can keep your div's, w/o the need of any tricks with transparent fonts.

Stack snippet

nav {
  width: 100px;
  background: lightgray;
}
header {
  display: flex;
}
header div:first-child, header div:last-child {
  flex: 1;
}
header div:last-child {
  background-image: url("http://images.evansante.com/grides/gradientLR.png");
  background-position: left;
  background-repeat: no-repeat;
  background-color: yellow;
}

<header role="banner">
  <div></div>
  <nav class="nav">
    hello
  </nav>
  <div></div>
</header>