蓝桥杯web组_用户名片

开始样式

第一步：左边部分 可以使用felx布局，先横向居中，再纵向居中。

.user-card{

/* 添加flex布局 横向 居中与纵向居中 */

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

第二步 大盒子居中

我们使用定位，上和左都移动50%，再使用位移，移动本身大小的50%，注意是负的哦。

/* 整个卡片 居中 只有定位+位移 */

.card{

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

}

效果图