0
点赞
收藏
分享

微信扫一扫

001-CSS-水平垂直居中布局

楠蛮鬼影 03-06 22:30 阅读 5
css前端

水平垂直居中布局

方案一:弹性盒子布局

💡 Tips:子盒子不定宽高

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

方案二:绝对定位 + transform

Tips:子盒子不定宽高

.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方案三:margin + 绝对定位,四个方向为零

Tips:子盒子不定宽高

.son {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

方案四:绝对定位 + margin

Tips:子盒子定宽高

.son {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

方案五:绝对定位 + calc

Tips:子盒子定宽高

.son {
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}
举报

相关推荐

0 条评论