如何实现div内链接按钮垂直居中且与菜单栏高度一致？

text-align: center 仅作用于行内内容的水平对齐，既无法控制垂直方向对齐，也不能让链接高度匹配菜单栏，所以你之前的写法不会生效。

下面是可直接复用的实现代码，采用目前兼容性最好的Flex布局方案，不需要手动计算间距，修改菜单栏高度时链接会自动适配：

• 首先给导航根容器添加基础布局样式

.topnav {
  /* 自定义菜单栏高度，可根据需求修改数值 */
  height: 48px;
  display: flex;
  /* 核心垂直居中属性：所有子元素沿交叉轴（垂直方向）居中 */
  align-items: center;
  background-color: #333;
  overflow: hidden;
}

• 给所有导航链接设置样式，实现高度与菜单栏完全一致、文字居中

.topnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 高度100%自动匹配父级菜单栏高度，点击区域覆盖整行导航高度 */
  height: 100%;
  padding: 0 16px;
  color: #fff;
  text-decoration: none;
}

/* 导航选中态样式，可按需调整 */
.topnav a.active {
  background-color: #04AA6D;
  color: #fff;
}

• 给分区容器（居中、右侧导航组）添加适配样式

.topnav-centered {
  /* 左右margin自动撑开，实现中间导航项居中 */
  margin: 0 auto;
}

.topnav-right {
  display: flex;
  height: 100%;
}

可选替代方案：行高适配 #

如果是纯单行文字导航、不需要兼容特殊布局，也可以用行高匹配的方式实现：

• 给.topnav设置固定高度，例如height: 48px
• 给.topnav a设置line-height: 48px（数值和菜单栏高度完全一致）、height: 100%即可
• 该方案缺点是导航文字换行时会直接错位，不适合多行内容场景。

注意：垂直居中效果需要父容器和子元素样式配合实现，仅给子元素单独添加居中属性无法生效。

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