Html 如何在另一个div内垂直对齐两个div？

我正在尝试用html和css设计我的网站标题。我的标题由顶部的一条长横幅组成。此横幅分为两个部分：#左侧横幅和#右侧横幅#横幅右侧又分为两个分区：#横幅顶部和#横幅-底部。顶部是我的社交链接导航，底部是主导航

我希望社交链接与右横幅上半部分的垂直中间对齐，主导航与横幅下半部分的垂直中间对齐。问题是，社交链接位于上半部分的底部，主导航位于下半部分的顶部。这是一个

标题{
背景：#D7DADB；
边际：0px；
填充：0px 15px；
边框底部：15px实心#FC4349；
}
标题#横幅{
填充：15px；
显示：表格；
位置：相对位置；
宽度：100%；
}
标题#横幅#横幅左{
填充：0px 25px 0px 0px；
显示：表格单元格；
垂直对齐：中间对齐；
}
标题#横幅#横幅左h1{
字号：3em；
颜色：#FC4349；
字体系列：PowerChord；
-webkit文本笔划宽度：3px；
-webkit文本笔划颜色：#fff；
}
标题#横幅左p{
字号：2em；
颜色：#2C3E50；
}
标题#横幅#横幅右侧{
左边框：1px实心#6DBCDB；
填充：15px；
溢出：自动；
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：右对齐；
}
标题#横幅#横幅右侧#横幅顶部{
边框底部：1px实心#6DBCDB；
}
标题#横幅#横幅右侧#横幅顶部ul{
列表样式：无；
显示：表格单元格；
垂直对齐：中间对齐；
}
标题#横幅#横幅右侧#横幅顶部ul>li{
显示：内联块；
右边距：15px；
}
标题#横幅#横幅右侧#横幅顶部ul>LIA{
字号：2em；
}
标题#横幅#横幅右侧#横幅底部导航{
显示：表格单元格；
垂直对齐：中间对齐；
}
标题#横幅#横幅右侧#横幅底部导航ul{
列表样式：无；
}
标题#横幅#横幅右侧#横幅底部ul>li{
显示：内联块；
}

站点名称
一些吸引人的口号

您可以使用边距和填充来调整它们相对于垂直空间的位置，例如：

header #banner #banner-right #banner-top {
    border-bottom: 1px solid #6DBCDB;
  margin-bottom:15%;
  padding-bottom:15%;
}

相应地调整高度和宽度，但使用浮动功能，意味着#横幅底部将尝试浮动到#横幅顶部的左侧，但由于无法在#横幅右侧内浮动，它将自动下降到#横幅顶部下方，这意味着无论设备大小，它都能响应，并且是跨平台兼容的#

---

理想情况下，整个页面应该使用百分比，因为它将缩放到设备。

这种方法实际上不是垂直居中。

#banner-top 
{
height:50%;
width:100%;
float:left;
}
#banner-bottom
{
height:50%;
width:100%;
float:left;
}