为什么我无法将此文本居中？

Question

因此，我想将此div与主标题图像一起放在.phrase-wrap的中心。使用flexbox无效，因为图像是.carousel的兄弟姐妹，所以我知道的唯一另一种方法是将.phrase-wrap设置为绝对位置，然后使top，bottom，left，right 0;和自动保证金。只是将其移动到顶部，如图所示有什么想法吗？

p.s最初创建此网站的人有多个css文件，对不起所有样式都没有设置

.phrase-wrap

#first-block, #second-block, #third-block, #fourth-block {
text-align:center;
padding:3.5rem 0;
}
#carousel {
text-align:center;
background:#e5e5e5;
position: relative;
display: flex;
flex-direction: column;
}
#carousel .header-img {
width: 100%;
}
.phrase-wrap {
position: absolute;
z-index: 1;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
}
#first-block {
background:#fff;
}
#second-block {
background:#e5e5e5;
}
#third-block {
background:#fff;
}
#fourth-block {
background:#e5e5e5;
}
footer {
background:#fff;
padding:3.5rem 0;
}
@media screen and (max-width: 768px) {
  .right {
  float:none;
  }
}

Answer 1

这是我用来找到答案的参考文献的一些链接：

• https://css-tricks.com/centering-css-complete-guide/
• https://www.w3.org/Style/Examples/007/center.en.html#hv3

看来您真的很亲密！无需使用水平居中的margin自动功能，而是将右边距设置为50％，并设置transform属性。尽管要检查转换属性https://caniuse.com/#feat=transforms2d，但检查浏览器的兼容性很重要。这是您将用于居中的代码：

.phrase-wrap {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);}