How To Center A Logo in Navbar with CSS Flexbox

In this short tutorial, we will learn to center a logo in navbar with CSS Flexbox.

HTML

<header>
  <nav>
    <ul>
      <li><img src="logo.png" alt="" /></li>
      <li>About</li>
      <li>Projects</li>
      <li>Service</li>
      <li>Contact</li>
    </ul>
  </nav>
</header>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    padding: 0;
    margin: 0;
    font-size: 1.3rem;
    color: #fff;
    background-color: blanchedalmond;
}

header {
    width: 100%;
    background-color: rgb(139, 200, 253);
}

nav {
    padding: 5px;
    max-width: 800px;
    margin: 0 auto;
}

img {
    width: 100px;
    height: 100px;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

li:nth-child(1) {
    flex-basis: auto;
    margin: 0 auto;
    order: 2;
}

li:nth-child(2),
li:nth-child(3) {
    order: 1;
    margin-right: 20px;
}

li:nth-child(4),
li:nth-child(5) {
    order: 3;
    margin-right: 20px;
}

li:last-child {
    margin-right: 0;
}