Html 如何将文本居中放置在div的中心

我试图将html卡片的标题放在header div的中心，它有一个“x”按钮

我曾尝试使用

边距：0 auto

对中，但它在div的剩余/剩余空间内居中。我想要的是在div的整个长度内居中（真正的中心）

计时器标题

X
0:00
停止播放重置

。计时器卡{
边框颜色：灰色；
边框宽度：1px；
边框样式：实心；
宽度：200px；
背景颜色：灰色；
框大小：边框框；
填充：10px；
}
.计时器卡.磁头{
显示器：flex；
证明内容：之间的空间；
}
.计时卡p.标题{
文本对齐：居中；
}

位置：在
.head
元素上的相对

位置：绝对位置；右：0.close
元素上选择code>
margin:0自动.title
元素上的code>

下面的代码片段：


。计时器卡{
边框颜色：灰色；
边框宽度：1px；
边框样式：实心；
宽度：200px；
背景颜色：灰色；
框大小：边框框；
填充：10px；
}
.计时卡.倒计时{
字体大小：40px；
}
.timer card按钮.close、.timer card.title{
显示：内联块；
}
.计时器卡.磁头{
显示器：flex；
证明内容：之间的空间；
位置：相对位置；
}
.计时器卡.标题{
保证金：0自动；
}
.计时器卡.关闭{
位置：绝对位置；
右：0；
}
.计时卡.车身p.倒计时{
保证金：0自动；
文本对齐：居中；
}
.计时器卡.页脚{
填充顶部：15px；
显示器：flex；
证明内容：中心；
}
.计时卡p.标题{
文本对齐：居中；
}

计时器标题

X
0:00
停止播放重置
一个快速的恶意攻击就是在CSS上添加一半大小的X按钮作为空白

.title {
    width: 100%;
    margin-left: 25px;
 }

计时器卡片p.标题选择器添加“宽度：100%；”@bruce182尝试这样做，它仍然在剩余的空间居中，而不是真正的中心。我想我必须将“x”按钮从页面流中移除？但我不知道怎么做。是的，就是这样！通过
位置：绝对
使按钮不成为div的一部分，谢谢，还有其他参与的人！