Html 垂直对齐：中间不工作

我有一个章节标题，左右两边都有一个边框。理想情况下，我希望这些是垂直对齐的。但是，

垂直对齐：中间不起作用，我也不太清楚原因。想法

CSS

HTML


保存日期

设置
显示：容器上的表格单元格以及
垂直对齐：中间
。这将导致CSS将容器视为允许指定垂直对齐的表格单元格。
由于这只是一行，您可以简单地将行高度设置为元素的高度

HTML
由于使用div div的显示为block，因此可以将其更改为
或chanage display，例如：

div
{display: inline-block}

或

div{display:表格单元格；}

我不知道为什么它在我的情况下起作用。。。但到目前为止，我可以通过以下方式看到它的工作：

div {padding-top: 0%;}

浮动是您的问题，您还需要为垂直对齐设置正确的高度。设置
display:table cell
导致每个元素堆叠在另一个元素之上。任何关于发生这种情况的原因/如何纠正的想法？
表单元格
将默认堆叠。您需要创建一个中心框，并将样式仅应用于该框。另外两个
div
元素不需要对其应用表单元格，因此这不会造成任何问题。我不知道我是否理解正确，但是。。我把
h2
放在它自己的div中，我想放在中间，但仍然没有看到变化。干得好。我已经进一步简化了。。。我所做的是把所有的东西都做成一个跨度，然后浮动左右边框框。因为跨距是内联元素，所以在显示属性时，跨距的反应不像div。
h2
也被内联，以使其对垂直居中做出正确反应。CSS已经更改，以便更好地向您展示到底发生了什么，但是您应该能够很容易地将其适应于您正在尝试完成的任务。我非常感谢您深思熟虑的回答。我已经将您在JSFIDLE中给我的指导应用到我的站点上，但是事情看起来仍然不太对劲。
​<p>hello</p>​

p {
  line-height: 50px;
  height: 50px;
  background-color: #eee;
}​

div
{display: inline-block}

div {padding-top: 0%;}