其他分享
首页 > 其他分享> > 元素居中方法

元素居中方法

作者:互联网

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;

}

标签:居中,40px,元素,50%,height,width,20px,son,方法
来源: https://www.cnblogs.com/shuaifeiyu/p/16634630.html