HTML/CSS Flex布局新手提问：如何实现边框居中？

• 外层.menuBar未设置Flex布局，原有给.menu单独设置高度、宽度的逻辑错位，导致logo和菜单块默认纵向堆叠
• .menu仅设置了单一子元素ul，此时使用justify-content: space-between无实际效果
• 给li手动设置margin-top: 5px的偏移方式无法实现垂直居中，上下边距不匹配，带边框的a标签视觉偏移
• 未清除浏览器默认的ul边距、列表圆点，以及a标签默认下划线，进一步干扰对齐效果
• a标签上的clear: both是浮动时代的废弃属性，在Flex布局中无作用

• 将Flex布局设置在最外层的.menuBar上，同时实现左右（logo、菜单）横向排列、子元素整体垂直居中
• 给ul设置Flex布局，让列表项横向排布，清除默认列表样式
• 取消li的手动margin-top偏移，改用Flex对齐属性自动完成垂直居中
• 移除a标签上无用的clear: both属性，补充去掉下划线的样式

样式代码 #

/* 清除浏览器默认边距，避免原生样式干扰布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.menuBar {
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center; /* 内部子元素垂直居中 */
  justify-content: space-between; /* 左右分布logo和菜单 */
  background-color: skyblue;
  margin-top: 20px;
  padding: 0 20px; /* 避免内容紧贴屏幕边缘 */
}
.menu ul {
  display: flex;
  list-style: none; /* 去掉列表默认圆点 */
}
.menu ul li {
  margin-left: 15px; /* 菜单选项之间预留间距 */
}
.menu a {
  display: inline-block;
  color: green;
  font-size: 18px;
  border: 2px solid green;
  border-radius: 6px;
  padding: 10px 25px;
  text-decoration: none; /* 去掉a标签默认下划线 */
}

结构代码（无需修改原有HTML结构） #

<div class="menuBar">
  <div class="logo">
    <img src="images/garanti_logo.png" alt="站点标识">
  </div>
  <div class="menu">
    <ul>
      <li><a href="#">Anasayfa</a></li>
      <li><a href="#">Bireysel</a></li>
      <li><a href="#">Kobi</a></li>
      <li><a href="#">Ticari / Kurumsal</a></li>
      <li><a href="#">Hakkımızda</a></li>
    </ul>
  </div>
</div>

• 带边框的a标签会随导航栏整体垂直居中，不存在上下偏移的问题
• 菜单选项横向均匀排布，左侧logo与右侧菜单自动分置导航栏两端
• 所有间距由Flex属性自动计算，不需要手动调整边距适配高度

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