• 欢迎光临~

元素居中方法

开发技术 开发技术 2022-08-29 次浏览

1、定位+外边距

.father{

  position:relative;

  top:50%;

  left:50%;
  width:40px;

  height:40px;

  .son{

  posithon:absolute;

  margin:-10px 0 0 -10px;

  width:20px;

  height:20px;

}

}

2、定位+位移(transform:translate(-50%,-50%))

.father{

  position:relative;

  top:50%;

  left:50%;
  width:40px;

  height:40px;

  .son{

  posithon:absolute;

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

  width:20px;

  height:20px;

}

}

3、弹性布局flex

.son{

  display:flex;

  justify-content:center;

  align-item:center;

}

程序员灯塔
转载请注明原文链接:元素居中方法
喜欢 (0)