我有麻烦的中心标签弹出时点击。我尝试了不同的定位方法，并将其放置在列表顶部的中心，但运气不好。我越移动标签，它就越偏离弹出框的中心。
目标一旦被点击，标签就会从按钮的侧面移到弹出窗口的顶部。
div {
position: relative;
box-sizing: border-box;
}
p {
font-size: 9pt;
margin-bottom: 1pt;
margin-top: 2.5pt;
margin-left: 2px;
z-index: 5;
}
a {
color: inherit;
text-decoration: none;
}
label {
font-size: 10pt;
margin-bottom: 0pt;
margin-top: 12pt;
margin-left: 14px;
color: #e26030;
font-weight: bold;
}
/*
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
.test {
position: sticky;
top: 0px;
right: 2px;
}
.centered-y {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
height: 500%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
background: white;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 13px;
height: 13px;
border-radius: 15px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 2.5px solid #e26030;
}
.distribution-map .map-point .content {
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
opacity: 1;
width: 100px;
height: 100px;
color: #e5e5e5;
z-index: 1;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content {
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}<html>
<body>
<div class="distribution-map">
<button class="map-point" id="one" style="top:130%;left:39%">
<label class="test" for="one">TOP</label>
<div class="content">
<div class="centered-y">
<p><a href="">Sub1</a></p>
<p>Sub2</p>
<p>Sub3</p>
<p>Sub4</p>
</div>
</div>
</button>
</div>
</body>
</html>问题是在margin-left: 14px;属性的标签，删除它后，.test是居中的，但你必须改变点的位置
div {
position: relative;
box-sizing: border-box;
}
p {
font-size: 9pt;
margin-bottom: 1pt;
margin-top: 2.5pt;
margin-left: 2px;
z-index: 5;
}
a {
color: inherit;
text-decoration: none;
}
label {
font-size: 10pt;
margin-bottom: 0pt;
margin-top: 12pt;
/*margin-left: 14px;*/
color: #e26030;
font-weight: bold;
}
/*
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
*/
.test {
position: sticky;
top: 0px;
right: 2px;
}
.centered-y {
position: absolute;
width: 100%;
height: 100%;
top: 50%;
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
height: 500%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
background: white;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
width: 13px;
height: 13px;
border-radius: 15px;
transform: translate(-50%, -50%);
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: rgba(26, 26, 26, 0.85);
border: 2.5px solid #e26030;
}
.distribution-map .map-point .content {
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active,
.distribution-map .map-point:focus {
margin: 0;
padding: 0;
opacity: 1;
width: 100px;
height: 100px;
color: #e5e5e5;
z-index: 1;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
}
.distribution-map .map-point:active .content,
.distribution-map .map-point:focus .content {
opacity: 1;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;
}
.distribution-map .map-point:active .content a:hover,
.distribution-map .map-point:active .content a:active,
.distribution-map .map-point:focus .content a:hover,
.distribution-map .map-point:focus .content a:active {
color: #afe1fa;
}<html>
<body>
<div class="distribution-map">
<button class="map-point" id="one" style="top:130%;left:39%">
<label class="test" for="one">TOP</label>
<div class="content">
<div class="centered-y">
<p><a href="">Sub1</a></p>
<p>Sub2</p>
<p>Sub3</p>
<p>Sub4</p>
</div>
</div>
</button>
</div>
</body>
</html>