越简短的排越前,复制粘贴用
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居中(自用)》对你有帮助,请点赞、收藏,并留下你的观点哦!