Vue 无需定位实现 400px 导航栏，按钮距离边框 10px，标题居中

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}

.button {
  height: 100%;
  line-height: 40px;
  padding: 0 10px;
}

.left {
  margin-right: 10px;
}

.right {
  margin-left: 10px;
}

.title {
  width: 100px;
  text-align: center;
}

解释：

1. 将导航栏设置为 flex 布局，使左右按钮和标题可以分别靠左、右、中间对齐；
2. 使用 justify-content: space-between; 将左右按钮与标题分别靠左、右两端对齐；
3. 使用 align-items: center; 将左右按钮和标题垂直居中对齐；
4. 左右按钮设置 margin-left 和 margin-right 为 10px，使其距离边框有 10px 的间距；
5. 标题设置宽度为 100px，使用 text-align: center; 使其居中对齐。