居中的几种方式
1.行内元素居中，想要让行内元素（如 <span> 或 <a>）在其父容器中居中
<template><div class="center-text"><span>居中的文本</span></div>
</template><style>
.center-text {text-align: center;
}
</style>
2.块级元素居中
使用flex布局
<template><div class="flex-center"><p>居中的文本</p></div>
</template><style>
.flex-center {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100px; /* 示例高度 */
}
</style>
使用grid布局
<template><div class="grid-center"><p>居中的文本</p></div>
</template><style>
.grid-center {display: grid;place-items: center; /* 同时水平垂直居中 */height: 100px; /* 示例高度 */
}
</style>
盒子模型
width：内容的宽度
height：内容的高度
padding：内边距
border：边框
margin：外边距 （可设置具体像素值或百分比）
