html - HTML/CSS:将徽标与导航栏的顶部和底部保持相等的距离

我的问题

我正在尝试将徽标保留在导航栏的左侧，并使其与导航栏的顶部和底部保持相等的距离。（在提供的图片中说明）

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div id="logo-nav" class="col-4">
                <a href="/" title="Home">
                    <img class="logo-nav" src="images/logo-2.png" alt="My Logo">
                </a>
            </div>
        </div>
   </div>
</body>

CSS：

.container {
    max-width :100%;
    margin: auto;
}

.navbar{
    width: 100%;
    height: 70px;
    background-color: #181827;
}

.logo-nav{
    position: absolute;
    margin:auto ;
}

.row {
    width:100%;
    height: 160px;
}

.col-12 {
    width:100%;
}

.col-8 {
    width:66.6%;
}

.col-6 {
    width:50%
}

.col-4 {
    width:33.3%;
}

说明

RED BOX是我的徽标当前所在的地方，似乎卡在了导航栏的顶部。

绿色框是我想要的位置-在导航栏的中间：与底部和顶部之间的距离相等（从左到右，我希望它像现在一样一直向左移动）

html - HTML/CSS:将徽标与导航栏的顶部和底部保持相等的距离-LMLPHP

所以我尝试在网上进行研究，这促使我尝试

.logo-nav{
    position: absolute;
    margin:auto ;

但不幸的是，它并没有给我我想要的结果。这就是为什么我在这里

我认为我弄错的是对position和margin的工作方式的理解。

所以我的问题是：我如何从红色框到绿色框？（我的代码出了什么问题？）

最重要的是

谢谢您的意见：）

最佳答案

试试这个变体：

.navbar{
    width: 100%;
    height: 70px;
    background-color: #181827;
    position: relative;
}

.logo-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

关于html - HTML/CSS:将徽标与导航栏的顶部和底部保持相等的距离，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46958410/