Vue3+TS项目中App.vue元素在页面宽>1024时自动居中问题求助

使用Vue3 + TypeScript开发首个项目时发现：当页面宽度大于1024px时，App.vue内的所有元素都会自动在屏幕中居中。尝试过更换Vue版本、修改App.vue代码、复制其他项目的CSS/TS/Vue文件，问题仍未解决。

相关代码如下：

App.vue模板代码 #

<template>
  <div>
    <p>This is the App component</p>
  </div>
</template>

main.ts代码 #

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

app.use(createPinia())
app.use(router)
app.use(ElementPlus)
app.mount('#app')

问题场景截图：

• 宽度大于1024px时元素居中效果：
• 宽度小于1024px时正常布局：

1. 排查Element Plus全局样式影响 #

Element Plus默认自带响应式断点（1024px是其中一个断点），部分全局样式可能会给根容器或页面元素设置居中规则。可以通过浏览器开发者工具（F12）查看#app或body元素的样式，检查是否存在如下类似媒体查询规则：

@media (min-width: 1024px) {
  .el-container, body, #app {
    margin: 0 auto;
    max-width: 1200px;
  }
}

解决方法：在项目的全局CSS（如main.css）中添加自定义样式覆盖：

@media (min-width: 1024px) {
  #app {
    margin: 0 !important;
    max-width: none !important;
  }
}

2. 检查main.css中的全局样式 #

打开./assets/main.css，查看是否存在针对页面宽度>1024px的居中样式设置，比如给body、html或#app设置了margin: 0 auto、text-align: center（块级元素配合display:block可能触发居中），或者flex布局的justify-content: center。
解决方法：删除或修改对应的全局样式规则，移除不必要的居中设置。

3. 检查index.html中的根容器样式 #

项目根目录下的index.html文件中，#app元素可能被直接设置了媒体查询样式。打开index.html查看是否有类似代码：

<style>
@media (min-width: 1024px) {
  #app {
    margin: 0 auto;
    width: 80%;
  }
}
</style>

解决方法：删除该媒体查询规则，或调整其中的margin、width属性值以取消居中。

4. 排查全局注册组件的样式影响 #

检查是否有全局注册的布局组件（如自定义Layout、路由全局守卫加载的组件）自带了居中逻辑。比如路由对应的页面组件是否包裹了默认居中的容器，或者Pinia状态中是否有控制布局的逻辑。
解决方法：查看全局组件的代码，移除其中的居中样式或逻辑。

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