qr-code-component

What are you most proud of, and what would you do differently next time?

@font-face {
      font-family: Outfit-Medium;
      src: url("./font/outfit/Outfit-Medium.ttf");
    }

通过这种方式引入并定义本地字体，在项目中可以直接使用

What challenges did you encounter, and how did you overcome them?

CSS 实现盒子模型水平垂直居中 方法一： position定位（适用于盒子有宽度和高度的时候）

.parent {
  position: relative;
}
.child {
 position: absolute;
 top: 50%
 left: 50%
 margin-left: -25px; /* 自身高度的一半 */
 margin-top: -25%;
}

方法二：position + transform (子盒子没有固定宽高)css

....position的代码同上
transform: translate(-50%, -50%)

方法三：flex布局 （父子 都没有宽高时使用）

.parent {
display: flex
justify-content: center
align-items: center 
}

子元素就是水平垂直居中显示的