越简短的排越前，复制粘贴用

1.父元素使用grid，父设定place-content

.parent {display: grid;place-content: center;}

2.父元素使用grid，子设定margin

.parent {display: grid;}.child {margin: auto;}

3.父设置flex，子设定margin

.parent {display: flex;}.child {margin: auto;}

4.父设置flex

.parent {display: flex;/* 水平轴center */justify-content: center; /* 交叉轴center */align-items: center;}

5.绝对定位

.parent {position: absolute;/* 使用后左边缘位于父元素中间 */top: 50%;left:50%;/* 减去自身一半的宽、高后子元素真正做到居中 */transform: translate(-50%, -50%);}

如果觉得《【css】5种方法实现div居中（自用）》对你有帮助，请点赞、收藏，并留下你的观点哦！