【Vue】前端记录点
居中的几种方式
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：外边距 （可设置具体像素值或百分比）
