Html CSS调整具有display:table单元格的div大小

我的站点上有一个标题，这个标题有一个容器和三个div

标题容器为100px高。 第一个div向左浮动，宽度为150px 第二个div向右浮动，宽度为150px 第三个div中有另一个div，默认情况下会调整大小以填充剩余空间

我希望第三个div垂直居中。添加“显示：表格单元格”和“垂直对齐：中间”时，div将收缩到文本的大小。我只能使用固定大小调整div的大小

<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>

#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}


div.leftimg
{
width: 150px;
float: left;
}

div.rightimg
{
width: 150px;
float: right;
}

左边
正当
水平和垂直居中的内容
#头部容器
{
边界：无；
边框底部：2px实心#8c8cd4；
宽度：100%；
高度：100px；
文本对齐：居中；
背景色：#000；
边缘底部：10px；
左边距：自动；
右边距：自动；
}
分区标题
{
显示：表格单元格；
垂直对齐：中间对齐；
高度：100px；
文本对齐：居中；
宽度：自动；
}
左师
{
宽度：150px；
浮动：左；
}
右侧分区
{
宽度：150px；
浮动：对；
}

有人能告诉我如何在不知道确切宽度的情况下居中调整中间的div吗

---

如果我从heading类中取出display:table单元格，它将不再垂直居中，而是水平居中。

我想这可能就是您想要的。。。我在css中更改了div.header，使其顶部有填充，删除了表格单元格，并将边距设置为“自动”，而不是“宽度自动”。看看这是否是你所希望的。你必须根据间隔调整顶部的填充物，但对我来说这似乎是最简单的方法

#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}


div.leftimg
{
width: 150px;
float: left;
}

div.rightimg
{
width: 150px;
float: right;
}

<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>

#标题容器
{
边界：无；
边框底部：2px实心#8c8cd4；
宽度：100%；
高度：100px；
文本对齐：居中；
背景色：#000；
边缘底部：10px；
左边距：自动；
右边距：自动；
}
分区标题
{
高度：100px；
文本对齐：居中；
保证金：自动；
填充顶部：40px；
}
左师
{
宽度：150px；
浮动：左；
}
右侧分区
{
宽度：150px；
浮动：对；
}
左边
正当
水平和垂直居中的内容

我现在找到了一个适合我的答案

首先是对HTML的一个小改动（标题中有两个额外的div）：

---

这使得包含文本的最后一个div可以垂直居中，也可以水平居中。帮助来自我在进一步搜索后发现的另一个堆栈溢出问题-818725。

试试这个

不幸的是，这不太管用。在可能的情况下，我需要标题的高度不超过100px，但里面的文本可能是一行、两行或三行文本，因此在这种情况下，固定的填充将不起作用。我希望我早知道这一点。使用Firefox和firebug是可以的，但这会更容易。

<div id="#headingcontainer">
    <div class="leftimg">Left</div>
    <div class="rightimg">Right</div>
    <div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>

#headingcontainer
{
    border: none;
    border-bottom: 2px solid #8c8cd4;
    background-color: #000;
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
}

div.heading
{
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: 100px;
    position: absolute;
}

div.heading div
{   
    display: table-row;
}

div.heading div div
{   
    display: table-cell;
    text-align: center; 
    vertical-align: middle;
}