left:0top:0right:0bottom:0margin: 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:
flexjustify-content: centeralign-items: center
4、flex+margin: auto 父元素 display: flex子元素 margin:auto
html结构1.position
这样就可以看到子元素在父元素居中啦！
2. flex
小结：
第一种方法 适用于有固定宽高的子元素 但是不会受制于浏览器的兼容性
第二种方法 在子元素不固定宽高也适用 但是受制于浏览器的兼容性 不过现在主流的浏览器都支持flex了
ps：浏览器兼容性查验推荐 https://caniuse.com/
元素之间的关系：父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
兄弟元素选择器
