VUE中的style

margin

margin - CSS：层叠样式表 | MDN (mozilla.org)

margin: 12px auto 40px; /*设置元素的上边距为12像素，自动计算左右外边距以尝试水平居中元素（前提是元素的宽度是已知的），并设置下边距为40像素。*/

position

position - CSS：层叠样式表 | MDN (mozilla.org)

position: relative;

你为一个元素设置 position: relative; 时，该元素会被定位，但它不会脱离正常的文档流。换句话说，它仍然会占据它原本在文档流中的空间，但它的位置可以通过 top、right、bottom 和 left 属性来调整。

line-height

用于设置多行元素的空间量，如多行文本的间距。

line-height:40px;

line-height - CSS：层叠样式表 | MDN (mozilla.org)

text-align

设置块元素或者单元格框的行内内容的水平对齐。这意味着其效果和 vertical-align 类似，但是是水平方向的。

text-align:center;

【注：如果该div中己有图片也有文字，两者均可居中，若只有图片则不可居中（具体为啥还不知道）】

text-align - CSS：层叠样式表 | MDN (mozilla.org)

---

居中

居中一个元素 - CSS：层叠样式表 | MDN (mozilla.org)

.container {
  height: 200px;
  display: flex;  //首先定为flex布局
  align-items: center;  //水平居中
  justify-content: center;  //垂直居中
}

文本溢出 

以处理文本溢出容器的情况，并给出一个视觉上的提示，告诉用户还有更多文本未被显示。

overflow: hidden; /* 隐藏超出容器的文本 */  
text-overflow: ellipsis; /* 在文本末尾显示省略号 */  
white-space: nowrap; /* 防止文本换行 */

• text-overflow: ellipsis;：当文本溢出其容器时，在文本的末尾显示省略号（...）。这个属性仅在设置了 overflow 属性为 hidden 或 scroll 的情况下才有效。

• overflow: hidden;：隐藏超出容器的内容，而不是让其显示出来或创建滚动条。这是使 text-overflow: ellipsis; 生效所必需的。

• white-space: nowrap;：防止文本在容器内换行。这确保了文本在溢出容器之前会尽可能长地显示在一行内。