如何使header中的<p>元素不受logo影响完全居中？

问题背景 #

需要让header中的<p id="page-description">元素完全居中，不受左侧logo干扰，尝试过grid布局、将p放入容器设置margin: 0 auto均未达到预期效果。

问题根源 #

当前代码中logo使用了float: left，该属性会使元素脱离正常文档流，导致header内的可用宽度被logo占用，<p>元素的居中范围被限制在logo右侧的剩余空间，而非整个header宽度；同时<p>作为块级元素未设置明确宽度，margin: auto无法发挥预期的居中作用。

解决方案 #

通过调整header的布局方式，让<p>元素基于整个header宽度实现居中，以下提供两种可行方案：

方案1：绝对定位实现居中 #

body {
  background-color: grey;
}

header {
  background-image: url('header.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px;
  height: 10vh;
  /* 开启相对定位，作为绝对定位元素的参照 */
  position: relative;
  align-items: center;
  display: flex;
}

#logo {
  max-width: 30%;
  max-height: 100%;
  /* 移除干扰布局的float属性 */
}

#page-description {
  color: white;
  padding: 15px 15px;
  font-size: 30px;
  /* 绝对定位+平移实现水平居中 */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

方案2：Flex布局结合绝对定位 #

body {
  background-color: grey;
}

header {
  background-image: url('header.jpg');
  background-size: cover;
  background-position: center;
  padding: 20px;
  height: 10vh;
  /* Flex布局让内容整体垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#logo {
  max-width: 30%;
  max-height: 100%;
  /* 绝对定位将logo固定在左侧 */
  position: absolute;
  left: 20px;
}

#page-description {
  color: white;
  padding: 15px 15px;
  font-size: 30px;
  margin: 0;
}

方案说明 #

• 两种方案均移除了logo的float: left属性，避免其干扰正常布局流。
• 方案1通过绝对定位让<p>元素基于header的整个宽度水平居中，不受logo位置影响。
• 方案2利用Flex布局让<p>元素默认居中，再将logo单独定位到左侧，同样实现了不受干扰的居中效果。

内容的提问来源于stack exchange，提问作者A-1500