Html flexbox：垂直居中两个div

我在屏幕中央有一个带有标题的模式。 该标题必须包含标题和关闭该标题的按钮

--------------------------------
|                       (close)|
|  Text                        |
|                              |
--------------------------------

所以基本上我有两个要求：

标题内的每个文本必须垂直居中

能够将“（关闭）”定位在靠近拐角处收割台的位置

现在我把所有的东西都垂直居中，但是我把元素放在了ma pile的标题中：

--------------------------------
|                              |
|  Text                        |
|  (close)                     |
|                              |
--------------------------------

---

.modal-payment\uuuuu包装器{/您可以这样做。请参阅代码中的注释，以了解您正在做的事情，错误是剩下的


.modal-payment\uuuu包装{
最大宽度：50%；
宽度：500px；
高度：200px；
背景：白色；
字体系列：“拉托”、“无衬线”；
}
.modal_u_头{
display:flex；//您需要这个
证明内容：中心；
flex-direction:row；//您需要这个
宽度：100%；
高度：50px；
背景色：黑色；
颜色：白色；
字体大小：16px；
左侧填充：20px；
}
//您将需要以下css
.modal_u_标题>div{
证明内容：周围的空间；
宽度：50%；
自对准：居中；
}
.modal\uuuuu标题{//
提供的代码中有很多错误，但我认为这是您需要的。我必须删除@click，因为这里无法识别它


.modal-payment\uu包装{
最大宽度：50%；
宽度：500px；
高度：200px；
背景：白色；
字体系列：“拉托”、“无衬线”；
}
.modal__标题{
宽度：100%；
高度：50px；
背景色：黑色；
颜色：白色；
字体大小：16px；
左侧填充：20px；
位置：相对位置；
显示器：flex；
对齐项目：居中；
}
.modal\uuuu标题\uuuu标题{
文本转换：大写；
字母间距：2px；
字体大小：1.7em；
}
.modal\uuuuux标题{
位置：绝对位置；
右：.5em；
排名：0；
}

正文
x
如果需要将这些元素相邻对齐，请尝试此
弹性方向
应为
行
。然后使用
对齐项目
垂直居中。