Css vertical aligning center inside of header

Question

I have a php web page with a header on it. Inside the header I have a logo, and a nav tag with links, and a login form in it. The only problem is that everything in the nav is aligned at the top of the header. Is there a way to center all of it inside the header? I have tried properties like vertical-align: middle and nothing has worked. I have looked at other questions and tried to implement it, but nothing has worked so far.

body {
  margin: 0;
  background: #555;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
}

.container {
  width: 80%;
  margin: 0 auto;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 0;
}

nav {
  float: right;
  display: flex;
}

nav div{
  display: flex;
  float: right;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

<header>

  <div class="container">

    <a href="#">
      <img src="./res/TempLogo.png" class="logo" alt="DailyMath logo">
    </a>
    <nav>
        <div><a href="index.php">Home</a></div>
        <div><a href="#">Question of the Day</a></div>
        <div><a href="#">About</a></div>
        <div><a href="#">Login</a></div>

        <div>
          <form action="includes/login.inc.php" method="post">
            <div><input type="text" name="mailuid" placeholder="Username/Email"></div>
            <div><input type="password" name="pwd" placeholder="Password"></div>
            <div><button type="submit" name="login-submit">Login</button></div>
          </form>
        </div>

        <div><a href="signup.php">Sign up</a></div>

        <div>
          <form action="includes/logout.inc.php" method="post">
            <div><button type="submit" name="logout-submit">Logout</button></div>
          </form>
        </div>

    </nav>
  </div>

</header>

What I want:

Answer 1

I think your CSS is a little bloated right now (no doubt from trying to figure this out), but I've made some edits that I believe achieve your goal.

You need to have display:flex on the .container and then align-items:center to vertically center the child elements.

body {
  margin: 0;
  background: #555;
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
}

.container {
display:flex;
flex-direction:row;
flex-wrap:nowrap;
  width: 80%;
  margin: 0 auto;
  align-items:center;
}

header {
  background: #55d6aa;
}

header::after {
  content: '';
  display: table;
  clear: both;
}
.logo {
  flex:0 0 15%;
}
.logo img {
  height: 40px;
  width: 40px;
  padding: 0;
  margin: 0;
}

nav {
  float: right;
  display: flex;
}

nav div{
  display: flex;
  float: right;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
}

<header>

  <div class="container">

    <a class="logo" href="#">
      <img src="./res/TempLogo.png" alt="DailyMath logo">
    </a>
    <nav>
        <div><a href="index.php">Home</a></div>
        <div><a href="#">Question of the Day</a></div>
        <div><a href="#">About</a></div>
        <div><a href="#">Login</a></div>

        <div>
          <form action="includes/login.inc.php" method="post">
            <div><input type="text" name="mailuid" placeholder="Username/Email"></div>
            <div><input type="password" name="pwd" placeholder="Password"></div>
            <div><button type="submit" name="login-submit">Login</button></div>
          </form>
        </div>

        <div><a href="signup.php">Sign up</a></div>

        <div>
          <form action="includes/logout.inc.php" method="post">
            <div><button type="submit" name="logout-submit">Logout</button></div>
          </form>
        </div>

    </nav>
  </div>

</header>