如何实现导航栏navbar内div垂直居中 不受导航栏高度设置影响

问题原因 #

vertical-align: middle 仅对行内元素、表格单元格元素生效，你当前使用了float浮动布局，内部div属于脱离常规文档流的块级元素，因此该属性不会生效。

解决方案 #

改用Flex弹性布局实现，无需计算边距/内边距，导航栏高度任意修改都能保持内部元素垂直居中：

1. 给.navbar新增Flex布局相关属性，实现自动对齐
2. 删除.buttons和.links的浮动属性，Flex布局下浮动会失效无需保留

修改后的完整CSS代码如下：

.navbar {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 10px 10px;
  width: 100%;
  height: 100px; /* 这里高度可以随意修改，内部元素始终保持垂直居中 */
  font-family: Open Sans;
  background: white;
  position: fixed;
  /* 新增以下3行属性 */
  display: flex;
  justify-content: space-between; /* 左右两个容器分别贴导航栏左右两端 */
  align-items: center; /* 所有子元素垂直居中，核心属性 */
}

.buttons {
  /* 删掉原有的float: left属性即可 */
}

.links {
  /* 删掉原有的float: right属性即可 */
}

如果需要调整左右内容和导航栏边缘的间距，给.navbar加左右padding即可，不会影响垂直居中效果。

内容的提问来源于stack exchange，提问作者Uchiha Obito