Ich arbeite an einem Kurs, bei dem ich oben eine Navigationsleiste mit fester Position habe. Der Hintergrund ist auf eine Höhe von 100 VH eingestellt und das Div mit dem Textinhalt befindet sich in der Mitte des Hintergrunds. Mit Flexbox ist es fast zentriert, aber um es wirklich in die Mitte des Hintergrunds zu bringen, muss die Höhe des Div auf 100 % der Höhe eingestellt werden. Ich weiß etwas über Flexbox und die Höhe des Ansichtsfensters, bin mir aber nicht sicher, warum ich die Div-Höhe auf 100 % setzen muss, um den Tauchgang wirklich zu zentrieren. Ich denke, Sie können hier jedes beliebige Bild als Hintergrund einfügen, um das zu reproduzieren, was ich verlange. Ich hoffe, ich verstehe hier etwas.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: #fff;
color: #333;
line-height: 1.5;
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
h1,
h2 {
font-weight: 300px;
line-height: 1.5:
}
p {
margin: 10px 0;
}
img {
width: 100%;
/*makes image width of the container */
}
/* navbar */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
width: 100%;
height: 70px;
/* apparently a common height for navbar */
position: fixed;
top: 0px;
padding: 0 30px;
}
.navbar a {
color: #fff;
padding: 10px 20px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: 1px solid #28a745;
}
.navbar ul {
display: flex;
}
/* Header */
.hero {
background: url("/img/home/showcase.jpg") no-repeat center center/cover;
height: 100vh;
position: relative;
color: #fff;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to EdgeLedger</title>
<link rel="stylesheet" href="/css/utilities.css">
<!-- style.css is last in case utilities.css needs to be overwritten -->
<link rel="stylesheet" href="/css/style.css">
<script src="https://kit.fontawesome.com/6eab1538de.js" crossorigin="anonymous"></script>
</head>
<body id="home">
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
<span class="text-primary"><i class="fas fa-book-open"></i>Edge</span>Ledger
</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#cases">Cases</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="content">
<h1>The sky is the limit</h1>
<p>We provide world class financial assistance</p>
<a href="#about" class="btn">Read More</a>
</div>
</header>
</body>
</html>
如果我理解正确的话，你是说内容默认水平居中，但是div需要
height: 100%来垂直居中内容。Div 是块元素，这意味着默认情况下：
auto）。如果您的 div 是内容居中的 Flexbox，即使内容垂直居中，div 仍只会根据需要向下扩展，以适应其中最高的元素。由于 div 仍然位于屏幕顶部，即使其内容在 div 内垂直居中，内容也会出现在屏幕顶部，因为 div 仅与内容一样高，并且因为 div 位于屏幕顶部屏幕顶部。
但是，div 的
height: auto默认属性可以被覆盖。如果将高度设置为100%，则会强制 div 为其父元素（页面）高度的 100%。然后，div 将为内容提供一堆额外的空间，并且由于 Flex 规则，它会将内容定位在该额外空间的垂直中心。要进一步了解这一点，您可以尝试将
border: 5px dashed black添加到 div 中，以便您可以看到其大小和位置，然后使用不同的高度值，例如unset、100%、50%等。尝试并尝试！