Position navbar on the vertical center of a div

Question

I need to do something like this:

I have written this code:

HTML:

<html>
<head>
  <title>{% block title %} {% endblock %}</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css')}}">
</head>
<body>
  <div class="nav">
    <nav class="menu">
      <a href="{{ url_for('home') }}" class="menu__item" data-tooltip="Home">
        <i class="material-icons">home</i>
      </a>
      <a href="{{ url_for('about') }}" class="menu__item" data-tooltip="About">
        <i class="material-icons">account_box</i>
      </a>
      <a href="{{ url_for('skills') }}" class="menu__item" data-tooltip="Skills">
        <i class="material-icons">settings</i>
      </a>
      <a href="{{ url_for('projects') }}" class="menu__item" data-tooltip="Projects">
        <i class="material-icons">work</i>
      </a>
      <a href="{{ url_for('contact') }}" class="menu__item" data-tooltip="Contact">
        <i class="material-icons">email</i>
      </a>
    </nav>
  </div>
  {% block content %}
  {% endblock %}
</body>
</html>

CSS:

html{
    margin-left: 75px;
}

.nav{
    position: fixed;
    left: 0;
    width: 75px;
    height: 100%;
    background: #181818;
    font-size: 16px;
    font-family: sans-serif;
}

.menu{
    justify-content: center;
}

.menu__item{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    text-decoration: none;
    color: #a5a5a5;
    transition: background 0.3s;
}

However, the navbar is still showing up at the top of the parent div:

Does anyone know how I can fix this issue? What am I doing wrong. I usually don't work in html and css so this is probably something quite simple.

NOTE: I am using a python framework to manage the html so don't question the {% %} parts in the code. They are not the reason this is not working.

I have already seen this question before posting my question, it simply doesn't help due to the nature of the navbar and parent div. I'm still open to answers if you're willing to test this yourself. — Faizan Shah, Oct 24 '20 at 18:44
instead of usign `nav` you could use `div` or wrapp it into an extra div and vertically center that wrapper div. Plenty ways makign that solution work in your case. What else is rpevent you from doing it? — tacoshy, Oct 24 '20 at 18:49
sorry was a wrong link: https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers — tacoshy, Oct 24 '20 at 18:51
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/223567/discussion-between-faizan-shah-and-tacoshy). — Faizan Shah, Oct 24 '20 at 18:55

Position navbar on the vertical center of a div

0 Answers0