我试图为页面创建一个标题，将页面的标题置于中间并绝对居中。我试着用flex box和justify-content:space-between来做这件事，但如下所示，我会根据右侧按钮的宽度来扭曲标题(我夸大了这一点以显示效果(
虽然我能够绝对地将标题居中(使用h1上的绝对定位(；Want"；，按钮上出现了一个奇怪的副作用——它们再也无法点击了！我很困惑。这是怎么回事？如何使标题居中并保持按钮工作(使用flex(？
body {
max-width: 32em;
margin: 0 auto;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 2em;
justify-content: space-between;
border-bottom: 1px solid gray;
margin: 20px auto;
}
/* My attempt at keeping h1 absolutely centered on the page width */
h1.want {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 20px;
padding: 0;
margin: 0;
}<header>
<nav>
<div>
<button>Foo</button>
</div>
<div>
<div>
<h1 class="want">Want</h1>
</div>
</div>
<div>
<button>Bar</button>
<button>Bas</button>
<button>Bat</button>
<button>Bau</button>
</div>
</nav>
The buttons don't work here!
<nav>
<div>
<button>Foo</button>
</div>
<div>
<div>
<h1>Got this</h1>
</div>
</div>
<div>
<button>Bar</button>
<button>Bas</button>
<button>Bat</button>
<button>Bau</button>
</div>
</nav>
Buttons work here.
</header>如前所述，用户：Phix，问题是您的标题(位置：绝对；属性(覆盖按钮。在这种情况下，您应该将z-index添加到同级节点。
.button-wrapper {
z-index: 1;
}<!DOCTYPE html>
<html>
<head>
<style>
body {
max-width: 32em;
margin: 0 auto;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 2em;
justify-content: space-between;
border-bottom: 1px solid gray;
margin: 20px auto;
}
/* My attempt at keeping h1 absolutely centered on the page width */
h1.want {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 20px;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<header>
<nav>
<div class="button-wrapper">
<button>Foo</button>
</div>
<div>
<div>
<h1 class="want">Want</h1>
</div>
</div>
<div>
<button>Bar</button>
<button>Bas</button>
<button>Bat</button>
<button>Bau</button>
</div>
</nav>
The buttons don't work here!
<nav>
<div>
<button>Foo</button>
</div>
<div>
<div>
<h1>Got this</h1>
</div>
</div>
<div>
<button>Bar</button>
<button>Bas</button>
<button>Bat</button>
<button>Bau</button>
</div>
</nav>
Buttons work here.
</header>
</body>
</html>就像@Phix在评论中指出的那样，将position: absolute与left: 0和right: 0一起使用可以有效地为h1提供100%的宽度，然后覆盖相关按钮，使其无法访问。您可以通过给h1一个背景色来证明这一点(或者更好的是，使用浏览器中的开发工具(。
如果你简单地删除h1.want的所有样式，你就可以在不使用绝对定位的情况下获得所需的结果：
<!DOCTYPE html>
<html>
<head>
<style>
body {
max-width: 32em;
margin: 0 auto;
}
nav {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 2em;
justify-content: space-between;
border-bottom: 1px solid gray;
margin: 20px auto;
}
/* My attempt at keeping h1 absolutely centered on the page width */
/* h1.want {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 20px;
padding: 0;
margin: 0;
} */
</style>
</head>
<body>
<header>
<nav>
<div>
<button>Foo</button>
</div>
<div>
<div>
<h1 class="want">Want</h1>
</div>
</div>
<div>
<button>Bar</button>
<button>Bas</button>
<button>Bat</button>
<button>Bau</button>
</div>
</nav>
The buttons don't work here!
<nav>
<div>
<button>Foo</button>
</div>
<div>
<div>
<h1>Got this</h1>
</div>
</div>
<div>
<button>Bar</button>
<button>Bas</button>
<button>Bat</button>
<button>Bau</button>
</div>
</nav>
Buttons work here.
</header>
</body>
</html>