Css Позиционирование Flexbox - проблема lo go

Question

я изучаю flexbox, и у меня есть проблема. Я хочу сделать h1, p, button по центру выравнивания, а также lo go позиционировать top около margin-top 1em вот так. В основном h1, p, центр позиционирования кнопки и lo go позиционирование вершины от вершины поля 1em вот так. Должен ли я поставить lo go вне 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 к вашему lo go и стилю, чтобы он выделялся.

* {
  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

Да, вы должны поместить lo go вне содержимого div или вы должны прибегнуть к добавлению полей или отступов, что не рекомендуется.