水平垂直居中布局
- 方案一:弹性盒子布局
- 方案二:绝对定位 + transform
- 方案三:margin + 绝对定位,四个方向为零
- 方案四:绝对定位 + margin
- 方案五:绝对定位 + calc
方案一:弹性盒子布局
💡 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);
}