Html DIV位置和对齐问题

我正在尝试根据以下附件创建聊天窗口：

这是我在中创建的：

我正在尝试制作蓝色的

DIV

，其中付款信息位于中间，顶部DIV位于左侧，我可以轻松地在左侧制作第一个DIV，但无法将付款

DIV

置于中间，不确定我遗漏了什么

下面是代码

.chat_widget_body{float:左；宽度：100%；最小高度：550px；填充：25px；框大小：边框框；}
.chat_widget_bubble_green{背景：#c5d6b6；浮动：左；显示：内联块；填充：15px；边框半径：6px；位置：相对；字体系列：“蒙特塞拉特常规”；字体大小：15px；字体重量：400；颜色：#404040；}
.chat_widget_bubble_绿色：在{右侧：100%；顶部：70%；边框：实心透明；内容：“；高度：0；宽度：0；位置：绝对；指针事件：无；边框颜色：rgba（197214，183，0）；边框右侧颜色：35; c5d6b7；边框宽度：12px；边框顶部：-12px；}
.chat_widget_bubble_green>.msg_time{font size:11px；float:left；width:100%；文本对齐：right；padding:10px 10px 0 10px；框大小：边框框；颜色：#6f6f6f；}
.chat_widget_通知{显示：内联块；边距：0自动；填充：10px；边框半径：6px；字体系列：“蒙特塞拉特常规”；字体大小：15px；背景：#d9efff；边框：1px实心#b7ccdb；颜色：#404040；清除：两者；}
.chat_widget_footer{float:left；width:100%；}

从昨晚开始头痛得厉害。请引导我
今天上午11:00
已收到330.00卢比的付款

请尝试以下操作：

您需要在.chat\u小部件\u通知中设置

float:right，display:block

.chat\u widget\u body{float:左；宽度：100%；最小高度：550px；填充：25px；框大小：边框框；}
.chat_widget_bubble_green{背景：#c5d6b6；浮动：左；显示：内联块；填充：15px；边框半径：6px；位置：相对；字体系列：“蒙特塞拉特常规”；字体大小：15px；字体重量：400；颜色：#404040；}
.chat_widget_bubble_绿色：在{右侧：100%；顶部：70%；边框：实心透明；内容：“；高度：0；宽度：0；位置：绝对；指针事件：无；边框颜色：rgba（197214，183，0）；边框右侧颜色：35; c5d6b7；边框宽度：12px；边框顶部：-12px；}
.chat_widget_bubble_green>.msg_time{font size:11px；float:left；width:100%；文本对齐：right；padding:10px 10px 0 10px；框大小：边框框；颜色：#6f6f6f；}
.chat_widget_通知{显示：块；边距：20%自动；填充：10px 5px；边框半径：6px；字体系列：“蒙特塞拉特常规”；字体大小：15px；背景：d9efff；边框：1px实心#b7ccdb；颜色：#404040；清除：两者；宽度：55%；文本对齐：中心；}
.chat_widget_footer{float:left；width:100%；}

从昨晚开始头痛得厉害。请引导我
今天上午11:00
已收到330.00卢比的付款

您需要在

.chat\u widget\u通知中设置
float:right
，并进行一些调整

编辑操作注释：

我们能把那个蓝色的盒子放在中间吗

设置
display:block
而不是
inline block
，并在
中提供一些
宽度
。聊天工具\u通知


.chat\u widget\u body{
浮动：左；
宽度：100%；
最小高度：550px；
填充：25px；
框大小：边框框；
边框：黑色虚线1px
}
.chat\u widget\u bubble\u绿色{
背景：#c5d6b6；
浮动：左；
显示：内联块；
填充：15px；
边界半径：6px；
位置：相对位置；
字体系列：“蒙特塞拉特常规”；
字体大小：15px；
字体大小：400；
颜色：#404040；
宽度：70%；
利润率：10px 0
}
.chat\u widget\u bubble\u绿色：之后{
右：100%；
最高：70%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：rgba（19714183,0）；
右边框颜色：#c5d6b7；
边框宽度：12px；
边缘顶部：-12px；
}
.chat\u widget\u bubble\u green>.msg\u time{
字体大小：11px；
浮动：左；
宽度：100%；
文本对齐：右对齐；
填充：10px 10px 0 10px；
框大小：边框框；
颜色：#6f6f6f；
}
.chat\u widget\u通知{
显示：块；
宽度：40%；
保证金：0自动；
填充：10px；
边界半径：6px；
字体系列：“蒙特塞拉特常规”；
字体大小：15px；
背景：#d9efff；
边框：1px实心#b7ccdb；
颜色：#404040；
明确：两者皆有；
}
.chat\u小部件\u页脚{
浮动：左；
宽度：100%；
}


从昨晚开始头痛得厉害。请引导我
今天上午11:00
已收到330.00卢比的付款
从昨晚开始头痛得厉害。请引导我
今天上午11:00
已收到330.00卢比的付款
更改此css

.chat_widget_notification{display:block; width:50%; margin:0 auto; padding:10px; border-radius:6px; font-family: "Montserrat-Regular"; font-size:15px; background:#d9efff; border:1px solid #b7ccdb; color:#404040; clear:both;}

我们可以把那个蓝色的盒子放在中间吗？就像你的截图一样，但是让我们做你想做的，2分钟可以把蓝色的盒子放在中心吗？