::before伪元素布局中为什么使用 top和transform

想要给标题设置为样式，使用伪元素在文字前方设置竖条，效果如下

1.代码实现

1.设置标题样式，使用相对定位，为伪元素留出空间

2.伪元素在标题之前，使用：：before，

• top: 50%; 将元素的顶部位置设置在其包含块的高度的50%处，这意味着元素的顶部会在父元素的中间位置。
• transform: translateY(-50%); 将元素向上移动其自身高度的50%，从而实现真正的垂直居中效果。

.form-title{

  position: relative;

  padding-left: 10px; /* 给竖条留出空间 */

  font-size: 18px;

}

.form-title::before {

  content: '';

  position: absolute;

  left: 0; /* 垂直对齐左侧 */

  top: 50%;

  transform: translateY(-50%);

  width: 6px; /* 竖条宽度 */

  height: 100%; /* 竖条高度 */

  background-color:#409EFF; /* 竖条颜色 */

}

2.为什么要使用 top和transform

如果两行都不写，元素将保持其默认位置，通常是在其包含块的左上角，无法实现垂直居中的效果。因此，元素会按照普通的流布局显示，不会进行任何位置调整。

3.元素的默认位置

元素的默认位置是块的左上角，主要是因为：

1. 流布局：在标准的文档流中，块级元素（如 <div>、<p> 等）默认从顶部开始排列，每个元素在其父容器内占据一整行。

2. 坐标系：网页的坐标系以左上角为原点（0,0），因此未设置任何定位属性（如 position）的元素会在包含块的左上角显示。

3. 默认样式：浏览器通常会为元素提供基本的样式，没有额外的 CSS 设置时，元素不会偏移或居中。

所以，除非使用 position、margin、flexbox 或其他布局方式，元素会一直处于左上角。