Css Flexbox定位边距顶部的徽标问题

Question

im正在学习flexbox，我遇到了一个问题。我想让h1，p，按钮对齐中心，也标志定位顶部关于页边空白顶部1em这样。基本上h1，p，按钮定位中心和徽标定位顶部从页边空白顶部1em像那样。我应该把标志放在div.content外面吗？

* {
margin: 0;
padding: 0;
box-sizing: bordex-box
}
body {
font-family: sans-serif;
}
.content {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.logo {
text-decoration: none;
color: black;
font-weight: 700;
font-size: 1.2rem;
}
.content h1 {}
.content p {
margin-top: 1.5em;
opacity: 0.6;
width: 70%;
line-height: 1.5em;
}
.content .button {
margin-top: 1.5em;
padding: 1em 5em;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
color: #fff;
background: orange;
border-radius: 0.2em;
}

<div class="content">
<a href="" class="logo">logo</a>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur distinctio neque itaque dignissimos nesciunt quisquam architecto possimus corrupti, a molestias. Quibusdam cum eveniet minus maxime itaque consequatur adipisci, non delectus magni
ea voluptatum</p>
<a href="#" class="button">Register Now</a>
</div>

Answer 1

只需在徽标中添加position:absolute和一些样式即可使其脱颖而出。

* {
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
}
.outerbox {
display:flex;
height: 100vh;
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.logo {
text-decoration: none;
color: black;
font-weight: 700;
font-size: 1.2rem;
}
.content h1 {}
.content p {
margin-top: 1.5em;
opacity: 0.6;
width: 70%;
line-height: 1.5em;
}
.content .button {
margin-top: 1.5em;
padding: 1em 5em;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
color: #fff;
background: orange;
border-radius: 0.2em;
}

<div class="outerbox">
<div class="content">
<a href="" class="logo">logo</a>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur distinctio neque itaque dignissimos nesciunt quisquam architecto possimus corrupti, a molestias. Quibusdam cum eveniet minus maxime itaque consequatur adipisci, non delectus magni
ea voluptatum</p>
<a href="#" class="button">Register Now</a>
</div>
</div>

* {
margin: 0;
padding: 0;
box-sizing: bordex-box
}
body {
font-family: sans-serif;
}
.content {
position: relative;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.logo {
position: absolute;
width: 100%;
top: 0px;
background: rgba(255, 255, 255, 0.9);
margin-top: 1em;
}
.logo a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: 1.2rem;
}
.content h1 {}
.content p {
margin-top: 1.5em;
opacity: 0.6;
width: 70%;
line-height: 1.5em;
}
.content .button {
margin-top: 1.5em;
padding: 1em 5em;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
color: #fff;
background: orange;
border-radius: 0.2em;
}

<div class="content">
<div class="logo">
<a href="">logo</a>
</div>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur distinctio neque itaque dignissimos nesciunt quisquam architecto possimus corrupti, a molestias. Quibusdam cum eveniet minus maxime itaque consequatur adipisci, non delectus magni
ea voluptatum</p>
<a href="#" class="button">Register Now</a>
</div>

Answer 2

* {
margin: 0;
padding: 0;
box-sizing: bordex-box
}
body {
font-family: sans-serif;
}
nav {
width: 100%;
height: 60px;
padding: 1em;
display: flex;
justify-content: center;
}
.content {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.logo {
text-decoration: none;
color: black;
font-weight: 700;
font-size: 1.2rem;
}
.content h1 {}
.content p {
margin-top: 1.5em;
opacity: 0.6;
width: 70%;
line-height: 1.5em;
}
.content .button {
margin-top: 1.5em;
padding: 1em 5em;
font-size: 1.2rem;
font-weight: 700;
text-decoration: none;
color: #fff;
background: orange;
border-radius: 0.2em;
}

<nav>
<a href="" class="logo">logo</a>
</nav>
<div class="content">

<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur distinctio neque itaque dignissimos nesciunt quisquam architecto possimus corrupti, a molestias. Quibusdam cum eveniet minus maxime itaque consequatur adipisci, non delectus magni
ea voluptatum</p>
<a href="#" class="button">Register Now</a>
</div>

这就是你要找的吗？

Answer 3

是的，您必须将徽标放在内容div之外，或者您必须添加不推荐的边距或填充。