西安北郊做网站公司建设 市民中心网站

方案一：弹性盒子布局

💡 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);
}