html 将div置于高度为100vh的背景图像的中心

我正在学习一门课程，在顶部有一个固定位置的导航栏。背景设置为100vh的高度，一个带有文本内容的div在背景上居中。使用flexbox，它几乎居中，但为了实际上让它在背景的中心，这个div的高度必须设置为100%的高度。我已经掌握了flexbox和视口的高度，但我不知道如何使用flexbox。我搞不清楚为什么要把div的高度设置为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>

CSS

* {
    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%;
}





[![enter image description here](https://i.stack.imgur.com/Hmhpy.jpg)](https://i.stack.imgur.com/Hmhpy.jpg)

如果我没理解错的话，您是说默认情况下内容水平居中，但是div需要一个height: 100%来使内容垂直居中。
Div是块元素，这意味着默认情况下：
1.它们占据了屏幕的整个宽度
1.它们只占用显示其内容所需的高度（它们的默认高度为auto）。
如果您的div是一个内容居中的弹性框，即使内容垂直居中，div仍然只会向下扩展到所需的距离，以便容纳其中最高的元素。由于div仍然位于屏幕的顶部，即使其内容在div中垂直居中，内容将出现在屏幕的顶部，因为div仅与内容一样高，并且因为div在屏幕的顶部。
但是，可以覆盖div的默认属性height: auto。如果将高度设置为100%，则会强制div的高度为其父元素（页面）的100%。这样，div将为内容提供一堆额外的空间，并且由于弹性规则，它会将内容定位在该额外空间的垂直中心。
要进一步了解这一点，可以尝试将border: 5px dashed black添加到div中，以便查看其大小和位置，然后使用不同的高度值，如unset、100%、50%等。

html 将div置于高度为100vh的背景图像的中心

1条答案

相关问题

热门标签

最新问答