¿Como hacer que el cuadro rojo se centre verticalmente al navbar sin que cambie su tamaño ni el alto del navbar? Tengo un poco de código de css con el que ajusté el tamaño del cuadro rojo sin afectar el tamaño del navbar. Sludos!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<style>
.navbar-brand {
height: 40px;
}
#logo {
max-height: 40px;
padding: 0 auto;
margin-top: 0;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img id="logo" src="https://pbs.twimg.com/profile_images/932211484/cuadrado_rojo_400x400.png">Brand
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ejemplo" aria-controls="ejemplo" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="ejemplo">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link text-center" href="#">Item</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>