CSS：水平垂直居中

一、使用 Flexbox 布局

<script setup lang="ts">
// 不需要额外逻辑，纯CSS实现
</script><template><div class="flex-center"><div class="content">我是居中内容</div></div>
</template><style scoped>
.flex-center {display: flex;justify-content: center; /* 水平居中 */align-items: center;     /* 垂直居中 */height: 100%;          /* 视口高度 */width: 100%;            /* 宽度 */
}.content {/* 可选样式 */padding: 20px;background-color: #f0f0f0;border-radius: 8px;
}
</style>

二、使用 Grid 布局

<script setup lang="ts">
// 不需要额外逻辑，纯CSS实现
</script><template><div class="grid-center"><div class="content">我是居中内容</div></div>
</template><style scoped>
.grid-center {display: grid;place-items: center; /* 同时设置水平和垂直居中 */height: 100%;width: 100%;
}.content {/* 可选样式 */padding: 20px;background-color: #f0f0f0;
}
</style>

三、使用绝对定位 + transform

<script setup lang="ts">
// 不需要额外逻辑，纯CSS实现
</script><template><div class="absolute-center"><div class="content">我是居中内容</div></div>
</template><style scoped>
.absolute-center {position: relative;height: 100%;width: 100%;
}.content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); /* 反向偏移自身宽高的50% *//* 可选样式 */padding: 20px;background-color: #f0f0f0;
}
</style>

四、使用 margin: auto (需要固定尺寸)

<script setup lang="ts">
// 不需要额外逻辑，纯CSS实现
</script><template><div class="margin-auto-center"><div class="content">我是居中内容</div></div>
</template><style scoped>
.margin-auto-center {display: flex;height: 100%;width: 100%;
}.content {margin: auto; /* 需要在flex或grid容器中，且元素需要有尺寸 */width: 200px;  /* 需要固定宽度 */height: 100px; /* 需要固定高度 *//* 可选样式 */padding: 20px;background-color: #f0f0f0;
}
</style>

五、使用 CSS 表格布局

<script setup lang="ts">
// 不需要额外逻辑，纯CSS实现
</script><template><div class="table-center"><div class="content">我是居中内容</div></div>
</template><style scoped>
.table-center {display: table;width: 100%;height: 100%;
}.table-center > .content {display: table-cell;text-align: center; /* 水平居中 */vertical-align: middle; /* 垂直居中 */
}
</style>

六、使用 JavaScript 动态计算 (响应式)

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'const position = ref({ x: 0, y: 0 })
const contentRef = ref<HTMLElement>()const updatePosition = () => {if (contentRef.value) {const parent = contentRef.value.parentElementif (parent) {position.value = {x: (parent.clientWidth - contentRef.value.offsetWidth) / 2,y: (parent.clientHeight - contentRef.value.offsetHeight) / 2}}}
}onMounted(() => {updatePosition()window.addEventListener('resize', updatePosition)
})onBeforeUnmount(() => {window.removeEventListener('resize', updatePosition)
})
</script><template><div class="js-center"><div ref="contentRef" class="content" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }">我是JS计算的居中内容</div></div>
</template><style scoped>
.js-center {position: relative;height: 100%;width: 100%;
}.content {position: absolute;/* 初始位置，会被JS覆盖 */top: 0;left: 0;/* 可选样式 */padding: 20px;background-color: #f0f0f0;transition: transform 0.3s ease; /* 平滑过渡 */
}
</style>

七、使用 CSS 变量和 calc()

<script setup lang="ts">
// 不需要额外逻辑，纯CSS实现
</script><template><div class="calc-center"><div class="content">我是使用calc居中的内容</div></div>
</template><style scoped>
.calc-center {position: relative;height: 100%;width: 100%;
}.content {position: absolute;width: 200px;height: 100px;left: calc(50% - 100px); /* 50% - 宽度的一半 */top: calc(50% - 50px);  /* 50% - 高度的一半 *//* 可选样式 */padding: 20px;background-color: #f0f0f0;
}
</style>

Flexbox - 最简单、最现代的方式，推荐使用

Grid - 代码最简洁，但兼容性略低于Flexbox

绝对定位 + transform - 兼容性好，适合复杂场景

margin: auto - 需要固定尺寸，适合简单场景

CSS表格 - 较老的方法，不推荐在新项目中使用

JavaScript计算 - 适合需要动态调整的复杂场景

CSS calc() - 需要知道元素尺寸，灵活性较低

在大多数现代项目中，Flexbox 或 Grid 方法是首选，因为它们简洁、高效且易于维护。

以上方法均经过测试

八、欢迎交流指正