html - 显示 Flex 元素居中对齐

Question

我正在尝试使第二部分或第一部分与顶部对齐。
我不明白的是具有显示 flex 的元素与具有显示块的元素之间的关系。
第一个问题:与第二部分中居中的文本相比，是否有一种使用 flex 的方法，使顶部徽标看起来不会“偏离”中心？
笔链接:https://codepen.io/skella1/pen/vYZLdVN

<div class="header">
  <img src="https://via.placeholder.com/100x50" alt="">
  
  <p>Text Goes Here</p>
</div>
<div class="secHeader">
  <h1>Welcome</h1>
  <p>This is a page to login</p>
</div>
<div class="content">
  <div class="login">
    <p style="padding-right: 10px;">Login</p>
    <input type="text">
    <button>Login</button>
  </div>
</div>


body {
  margin: 0px;
  padding: 0px;
}
.header {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  img {
    margin: 0 auto;
  }
}
.secHeader {
  background-color: #ddd;
  text-align: center;
  display: block;
  line-height: 0px;
  padding: 20px;
  h1 {
    text-transform: uppercase;
    font-weight: 900;
  }
}
.content{
    background: url("http://www.placebear.com/500/300") center center no-repeat;
    background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
  .login {
    width: 100%;    
    height: 100%;
    position: absolute;
    top: 0;
    left: 0px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    display: flex;
  }
}

Answer 1

使用 justify-content: center 将图像居中在 flex 父元素上，然后将 P 元素位置设置为绝对位置并使用 top/right 属性定位它。
现在你有两个元素占用了 flex 父元素宽度的空间。图像和 P 标签内容。使用 justify-content: space-between将把元素不使用的剩余宽度放在它们之间。反过来，无论您的边距设置为 0 自动，都将图像的外观从居中倾斜，因为这只会将其放置在它从父项占用的空间的中心。

body {
  margin: 0px;
  padding: 0px;
}

.header {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
}
.header p {
  position: absolute;
  top: 0;
  right: 20px;
}

.secHeader {
  background-color: #ddd;
  text-align: center;
  display: block;
  line-height: 0px;
  padding: 20px;
}
.secHeader h1 {
  text-transform: uppercase;
  font-weight: 900;
}

.content {
  background: url("http://www.placebear.com/500/300") center center no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  position: relative;
}
.content .login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0px;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  display: flex;
}

<div class="header">
  <img src="https://via.placeholder.com/100x50" alt="">
  
  <p>Text Goes Here</p>
</div>
<div class="secHeader">
  <h1>Welcome</h1>
  <p>This is a page to login</p>
</div>
<div class="content">
  <div class="login">
    <p style="padding-right: 10px;">Login</p>
    <input type="text">
    <button>Login</button>
  </div>
</div>