Html 将“关闭”按钮添加到模型的中间顶部边缘

我有一个引导模式，我把一个稍微超调按钮的边缘。一切看起来都很完美，但我需要把这个按钮居中。

另一个问题是当浏览器窗口改变时；关闭按钮保持固定，按钮需要跟随至模态

所以当我添加到代码片段时，我意识到按钮被拉到了底部

这里是我的片段

哦
.模式默认关闭{
保证金：0；
位置：绝对位置；
顶部：200px；
右：48%；
宽度：30px；
高度：30px；
边界半径：23px；
背景色：红色；
颜色：#ffffff；
字体大小：40px；
不透明度：1；
z指数：10；
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
/*模态内容*/
.模态内容{
边界半径：25px！重要；
}
&时代；
我的同僚们都是精英。
去
$(() => {
$（'exampleModalCenter'）.modal（'show'）；
})

给出父级相对位置，并调整顶部和右侧（我将其更改为左侧）属性。这样，无论模态大小或按钮本身，按钮都将位于模态框的顶部中心

哦
.模态内容{
位置：相对位置；
}
.模式默认关闭{
保证金：0；
位置：绝对位置；
宽度：30px；
高度：30px；
边界半径：23px；
背景色：红色；
颜色：#ffffff；
字体大小：40px；
不透明度：1；
z指数：10；
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
排名：0；
左：50%；
转换：翻译（-50%，-50%）；
}
/*模态内容*/
.模态内容{
边界半径：25px！重要；
}
&时代；
我的同僚们都是精英。
去
$(() => {
$（'exampleModalCenter'）.modal（'show'）；
})

右侧：计算（50%-15px）-15px为您的屏幕宽度的一半icon@MrT您能在代码段中应用您的建议吗？当我单击“展开代码段”时；按钮在modalI的外面，在我的计算机中尝试此代码，但不起作用我编辑了我的代码片段。我重新整理了你的html，所以按钮现在在里面。模态内容与位置相对。我会完成的，瑞奇，它起作用了，我很高兴。