Html 用于居中和剩余空间居中的CSS

在我当前的项目中，我有一个最新的问题，我想在其中放置一些文本。此文本可能与该区域的每次使用不同

这一部分我已经完全理解了，但我想再放一段文字，正好在第一段文字结尾和区域结尾之间剩余空间的中心

我将如何构造css和html使之成为可能

下图应该有助于显示我想做的事情：

html，
身体{
身高：100%；
文本对齐：居中；
}
#左{
宽度：200px；
显示：内联块；
背景：#f00；
高度：200px；
证明内容：中心；
}
#对{
显示：内联块；
背景：#0f0；
高度：200px；
}

内容
其他内容

您可以尝试不同的布局。这是我将使用的：

*{
保证金：0；
填充：0；
框大小：边框框；
}
#包装纸{
显示：表格；
宽度：100%；
文本对齐：居中；
}
#一,，
#二,，
#三{
显示：表格单元格；
宽度：33.333%；
}
#一个{
宽度：200px；
高度：200px；
背景：白色；/*更改颜色以查看它*/
}
#两个{
背景：红色；
高度：200px；
}
#三{
高度：200px；
背景：绿色；
}

内容
其他内容

希望这有助于：

#容器{
高度：200px；
文本对齐：居中；
位置：相对位置；
}
#左{
宽度：200px；
保证金：自动；
身高：100%；
背景：#f00；
}
#对{
排名：0；
右：0；
底部：0；
背景：#0f0；
位置：绝对位置；
宽度：计算（50%-100px）；/*100px是#左侧的50%*/
}

内容
其他内容

请解释一下附件中的图片好吗？示例代码在哪里？对不起。我当然应该包括代码。我包括了我的尝试和问题。请投票重新开始这个问题。OP已经添加了相关代码和所有内容。我无法发布答案，因为问题已经关闭，应该重新打开。但解决方案是在左侧使用一个虚拟隐藏元素，以补偿右侧的元素-请参见：