试图将徽标居中显示在整页背景图像中，但导航栏将其向下推

Question

我有点新手，所以这可能是一件非常直接的事情。我正在尝试将徽标定位在完整背景图像登录页的中心。然而，我的导航栏一直把标志往下推。

我相信这是因为这两个元素都在同一个容器中。然而，我试着将导航移出容器，但它会将我的背景图像向下推。我试过玩position，但这会打乱我的标志和导航图标的flex属性。

任何建议/提示和简短的解释都将非常有用，谢谢。

这是我在下面的代码

还有一个代码笔：https://codepen.io/LeccaUK/pen/GRodYMO

* {
margin: 0;
padding: 0;
}
.icon {
width: 50px;
}
.logo {
width: 250px;
}
.hero-container {
background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
background-position: center center;
background-size: cover;
height: 100vh;
}
nav {
padding: 30px;
display: flex;
justify-content: space-between;
}
.hero-content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

<div class="hero-container">
<nav>
<img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon">
<img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon">
</nav>
<div class="hero-content">
<img src="https://image.flaticon.com/icons/svg/3121/3121628.svg" class="logo">
</div>
</div>

Answer 1

只需插入两个带有css背景img的div。就是这样。

* {
margin: 0;
padding: 0;
}
.icon {
width: 50px;
}
.logo {
width: 250px;
}
.hero-container {
background-image: url(https://images.wallpaperscraft.com/image/road_highway_asphalt_146464_1920x1080.jpg);
background-size: cover;
background-position: center center;
height: 100vh;
}
nav {
padding: 30px;
display: flex;
justify-content: space-between;
}
.hero-content {
background-image: url(https://image.flaticon.com/icons/svg/3121/3121628.svg);
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: 250px;
}

<div class="hero-container">
<div class="hero-content">
<nav>
<img src="https://image.flaticon.com/icons/svg/846/846551.svg" class="icon">
<img src="https://image.flaticon.com/icons/svg/2099/2099153.svg" class="icon">
</nav>
</div>
</div>