Html div内导航的垂直对准

我想创建一个导航栏，它在其父div中垂直对齐。下面是我的代码：

div#banner{
背景颜色：绿色；
高度：100px；
}
部门名称{
浮动：左；
宽度：300px；
颜色：白色；
字体大小：20px；
}
导航菜单{
显示：内联块；
垂直对齐：中间对齐；
填充：0px；
边距：0px字体大小：20px；
文本对齐：居中；
}
导航菜单{
背景色：红色；
填充：0px；
边际：0px；
列表样式：无；
显示：内联；
}
导航菜单ul li{
填充：0px；
边际：0px；
显示：内联；
垂直对齐：中间对齐；
}
导航菜单ul li a{
填充：0px；
边际：0px；
宽度：60px；
显示：内联块；
颜色：白色；
}

标题

只需添加几行，将其更改为flexbox布局。这样，您就可以更好地控制导航的大小和定位

div#banner{
背景颜色：绿色；
高度：100px；
显示：flex；使用以下命令编辑您的CSS：

div#banner {
  background-color: green;
  height: 100px;
  display: flex;
  align-items: center;
}

div#title {
  float: left;
  width: 300px;
  color: white;
  font-size: 20px;
}

nav#menu {
  display: inline-block;
  vertical-align: middle;
  padding: 0px;
  margin: 0px font-size: 20px;
  text-align: center;
}

nav#menu ul {
  background-color: red;
  padding: 0px;
  margin: 0px;
  list-style: none;
  display: inline;
}

nav#menu ul li {
  padding: 0px;
  margin: 0px;
  display: inline;
  vertical-align: middle;
}

nav#menu ul li a {
  padding: 0px;
  margin: 0px;
  width: 60px;
  display: inline-block;
  color: white;
}

最好的现代方法是使用flex，
对于div#banner，添加：
显示器：flex；
对齐项目：居中


div#banner{
背景颜色：绿色；
高度：100px；
显示器：flex；
对齐项目：居中；
}
部门名称{
浮动：左；
宽度：300px；
颜色：白色；
字体大小：20px；
}
导航菜单{
显示：内联块；
垂直对齐：中间对齐；
填充：0px；
边距：0px字体大小：20px；
文本对齐：居中；
}
导航菜单{
背景色：红色；
填充：0px；
边际：0px；
列表样式：无；
显示：内联；
}
导航菜单ul li{
填充：0px；
边际：0px；
显示：内联；
垂直对齐：中间对齐；
}
导航菜单ul li a{
填充：0px；
边际：0px；
宽度：60px；
显示：内联块；
颜色：白色；
}

标题





将以下行添加到导航菜单：

nav#menu {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}