Centered Logo in Navigation Bar?

Issue

can anybody guide me to the best way to create a navigation bar with a centered logo and 2 links in each side just like this:

Ive read about different ways like splitting a ul into 2 and floating one left and the other right and then centering the logo but im not sure how to do that and the more I read the more I got confused. I am looking for it to be responsive and for it to be taller than normal, maybe 15/20% of the screen height.

Can anybody help me on how to go about this?

Solution

Simply use Flexbox. Just replace the div #logo with your image.

HTML

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

CSS

html, body{
  height: 100%;
}

body{
  margin: 0;
}

nav{
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}

a{
  text-decoration: none;
  color: rgba(0,0,0,0.8);
  margin: 0 40px;
}

#logo{
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
nav {
  display: flex;
  width: 100%;
  height: 20%;
  background: #eee;
  align-items: center;
  justify-content: center;
}
a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  margin: 0 40px;
}
#logo {
  width: 200px;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

<nav>
  <a href="">Home</a>
  <a href="">Artwork</a>
  <div id="logo"></div>
  <a href="">Responses</a>
  <a href="">Contact</a>
</nav>

Answered By - SvenL