Vue3的 排版 ‐ 純 CSS 實現 - daniel-qa/Vue GitHub Wiki
最基礎的方式是使用 CSS 的 flexbox 或 grid 布局來實現。
<template>
<div class="container">
<el-button>按鈕</el-button>
</div>
</template>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 視窗高度 */
}
</style>
display: flex: 將容器變成一個彈性容器。
justify-content: center: 將內容在主軸方向（這裡是水平方向）上居中。
align-items: center: 將內容在交叉軸方向（這裡是垂直方向）上居中。
height: 100vh: 將容器的高度設置為視窗的高度，確保有足夠的空間來垂直居中。