如何使用CSS将子元素居中对齐于父元素中

1、定位+margin：auto 父元素 position: relative 子元素 position: absolute

left:0;top:0;right:0;bottom:0;margin: auto;

2、定位+margin-left+margin-top 父元素 position: relative 子元素 position:absolute

left:50%; top:50%; margin-left: -当前盒子宽度的一半; margin-top: -当前盒子高度的一

半

3、定位+transfrom（子元素未知宽高）父元素 position: relative 子元素 position:

absolute left:50%; top:50%; transform: translate(-50%,-50%); • 弹性盒子父元素 display:

flex; justify-content: center; align-items: center;

4、flex+margin: auto 父元素 display: flex; 子元素 margin:auto;