如何让h1元素相对于屏幕水平居中？导航栏布局场景

我正在创建导航栏，但在让h1元素相对于屏幕水平居中时遇到了问题——需说明的是，我并非要让h1相对于header元素居中，而是相对于屏幕居中。以下是我的HTML和CSS代码：

body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
}

nav {
  display: flex;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  margin-right: 10px;
}

h1 {
  margin: 0;
  text-align: center;
  flex-grow: 1;
}

button {
  display: inline-block;
}

<header>
  <nav>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </nav>

  <h1>SalonM</h1>

  <button>Button</button>

</header>

可行的解决办法 #

方法1：绝对定位实现全局居中 #

给h1设置绝对定位，脱离header的flex布局流，直接固定在屏幕正中央，同时保证header为定位参考容器：

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2%;
  position: relative; /* 为绝对定位的子元素提供坐标参考 */
}

nav {
  display: flex;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  margin-right: 10px;
}

h1 {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 向左平移自身宽度的50%，实现精准居中 */
}

button {
  display: inline-block;
}

方法2：CSS Grid重构布局 #

用Grid布局更直观地分配header空间，让中间的h1直接对齐屏幕中心：

修改后的CSS代码：

body {
  margin: 0;
  padding: 0;
}

header {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* 左右列平分剩余空间，中间列自适应内容 */
  align-items: center;
  padding: 0 2%;
}

nav {
  justify-self: start; /* 导航栏靠左对齐 */
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  margin-right: 10px;
}

h1 {
  margin: 0;
  justify-self: center; /* h1相对于屏幕水平居中 */
}

button {
  justify-self: end; /* 按钮靠右对齐 */
}

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