Html 一个分区放在两个分区上

我需要将一个div（3.element）放在另两个div标记的中心

#标题{
宽度：100%；
高度：150像素；
背景色：rgb（181230,29）；
}
#页脚{
宽度：100%；
高度：150像素；
背景色：rgb（153217234）；
}
#中段{
宽度：150px；
高度：250px；
背景色：rgb（200191231）；
左边距：自动；
右边距：自动；
}

将

#mid

放在标题内，并应用

位置：绝对到它，然后使用
转换：translate（-50%，50%）（分别适用于左侧和底部）以下是代码：


#标题{
宽度：100%；
高度：150像素；
背景色：rgb（181230,29）；
位置：相对位置；
}
#页脚{
宽度：100%；
高度：150像素；
背景色：rgb（153217234）；
}
#中段{
宽度：150px；
高度：200px；
位置：绝对位置；
底部：0；
左：50%；
转换：翻译（-50%，50%）；
背景色：rgb（200191231）；
z指数：100；
}


#标题{
宽度：100%；
高度：150像素；
背景色：rgb（181230,29）；
}
#页脚{
宽度：100%；
高度：150像素；
背景色：rgb（153217234）；
}
#中段{
宽度：150px；
高度：250px；
背景色：rgb（200191231）；
左边距：自动；
右边距：自动；
位置：绝对位置；
左：50%；
转换：翻译（-50%，-50%）；
}

将CSS中的
#mid
更改为：

#mid{
    position: relative;
    top: -125px;
    left: calc(50% - 75px); // center it by changing the negative value to half the width
    float: left; // this is what allows it to not "disturb" other elements
    width: 150px;
    height: 250px;
    background-color: rgb(200, 191, 231);
}

参考这个@Milan Panin，我的回答比你接受的要好得多。尝试改变#mid的大小。使其宽度为：50px；高度：100px；，你接受的答案行不通是的，你是对的，我的错。我是初学者，谢谢你的建议和帮助。对不起，我还没有完成，我无意中点击了提交。这是新的one@Milan我的回答比你接受的要好得多。尝试改变
#mid
的大小。使其
宽度：50px；高度：100px，您接受的答案无效。您的答案一点也不“好得多”。它工作得很好。他们几乎一模一样。如果他们想改变大小，他们所要做的就是将负值改为一半。这就是重点。用户不必在我的答案中指定高度。在您的回答中，如果在
#mid
div中有一个段落，那么在移动设备中，它将从div中流出。我刚刚在移动设备上测试了它，它工作得非常完美！我不知道你在说什么。老兄，说真的，你在否决我的其他答案。我只是指出哪个答案更好。做一个更好的人，给出更好的答案。