使用display:flex实现元素居中，解决顶部logo与下方区块文本不对齐问题

问题根源 #

你遇到的对齐偏移问题本质是两个区块的居中参考范围不一致导致的，核心原因有两个：

1. 顶部.header是flex布局，内部包含img（logo）和p（右侧文本）两个子元素。你给img设置了margin: 0 auto，同时父级设置了justify-content: space-between，此时flex项的auto margin会优先占用剩余空间，把右侧p元素挤到最边缘，logo的居中范围是「整个.header宽度减去右侧p元素宽度后的剩余空间」，而下方.secHeader的文本是基于整个容器全宽居中，两者参考的居中基准宽度不一样，自然会出现偏移。
2. .secHeader设置了不合理的line-height: 0，会导致文本的行高计算异常，也会带来视觉上的对齐误差。

flex布局解决方案 #

不用大幅修改代码，只要调整CSS即可实现logo和下方文本完全居中对齐：

• 首先让右侧的文本脱离flex布局的文档流，不占用flex容器的空间，这样logo就可以基于整个.header宽度居中
• 删掉.secHeader的line-height: 0，用margin调整文本间距
• 调整.header的对齐规则为居中对齐

修改后的完整代码如下：

<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: center;
  align-items: center;
  padding: 0px;
  position: relative;
}
.header p {
  position: absolute;
  right: 0;
  margin: 0;
}
.secHeader {
  background-color: #ddd;
  text-align: center;
  display: block;
  padding: 20px;
}
.secHeader h1 {
  text-transform: uppercase;
  font-weight: 900;
  margin: 0 0 16px 0;
}
.secHeader p {
  margin: 0;
}
.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;
}

如果不想用绝对定位，也可以调整.header的子元素结构，新增一个空的左侧占位元素，三个子元素都设置flex: 1，中间的子元素放logo并设置text-align: center，右侧子元素放文本并设置text-align: right，同样可以实现完全对齐，这种方式更适合右侧文本内容长度不固定的场景。

内容的提问来源于stack exchange，提问作者Skell