我的div无论如何都不会居中，因为它们彼此冲突，我知道可以使它们以top,transform: translate()居中，但当我调整大小时，它看起来很糟糕，以下是代码:
.question-text {
position: relative;
font-size: 3rem;
width: 50vw;
height: 57vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.question-text2 {
position: absolute;
font-size: 3rem;
width: 50vw;
height: 0vh;
display: flex;
text-align: center;
justify-content: center;
padding: 0;
text-shadow: 1px 1px 2px;
left: calc(50vw + 1rem);
top: 26%;
}
#valueIndex2{
position: relative;
color: salmon;
z-index: 104;
font-size: 3rem; /* Adjust the value as needed */
width: 50vw;
height: 50vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
padding: 0;
text-align: center;
}
#valueIndex{
color: salmon;
position: absolute;
font-size: 3rem;
width: 49vw;
height: 0vh;
display: flex;
text-align: center;
justify-content: center;
padding: 0;
left: calc(50vw + 1rem); /* Adjust the value as needed */
top: 35%; /* Adjust the value as needed */
margin: 0;
padding: 0;
overflow: hidden;
}<div class="pack-term">
<h2 class="question-text">
<span>${item2.name}</span>
</h2>
<h3 id="valueIndex2">
<span>${item2.value}</span>
</h3>
</div>
<div class="pack-term">
<h3 id="valueIndex">
<span>${item1.value}</span>
</h3>
<h2 class= "question-text2">
<span>${item1.name}</span>
</h2>