提供一个vue页面示例，样式使用element ui，写一个固定顶端且根据内容实时居中的导航栏

好的，以下是一个示例代码：

<template>
  <div>
    <el-header style="height: 60px; display: flex; justify-content: center;">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">导航1</el-menu-item>
        <el-menu-item index="2">导航2</el-menu-item>
        <el-menu-item index="3">导航3</el-menu-item>
        <el-menu-item index="4">导航4</el-menu-item>
      </el-menu>
    </el-header>
    <div style="height: 800px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    handleSelect(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style>
.el-menu-demo {
  width: 800px;
}
</style>

解释：

1. 使用了 Element UI 的 Header 和 Menu 组件来实现页面导航栏，Header 高度设置为 60px，并使用 flex 布局来实现水平居中。
2. Menu 组件的 mode 属性设置为 horizontal，表示水平布局。
3. 使用了默认样式的 Menu-Item 组件来实现导航菜单项，index 属性用于标识每个菜单项的索引，@select 事件用于监听菜单项的选中事件。
4. 在 data 中定义 activeIndex 属性来保存当前选中的菜单项索引。
5. 在 handleSelect 方法中更新 activeIndex 属性的值，从而实现菜单项的选中状态。
6. 在样式中设置 Menu 组件的宽度为 800px，使其居中显示。

这个示例中的导航栏是固定在页面顶端的，并且根据菜单项内容实时居中。在实际开发中，可以根据需求调整样式和布局。