在父子盒子嵌套下,让子盒子居中的方式:
第一种方法:position, 使用定位,子绝父相,再left:50%,margin-left:负的盒子宽度的一半,这是最常用的方法
第二种方法:flex,弹性布局,让子盒子居中,但是样式要写在父盒子中,display:flex,just-content:center
第三种方法:在position基础上,把margin-left换成CSS3中的transform:translate(-50px)
第四种方法:在position的基础上,只保留子绝父相,然后在子盒子中加上margin:auto、left:0、right:0;
这个是边距合并问题导致的,除了给父元素设置border之外,给父元素设置padding-top值和padding-bottom值或者设置overflow:hidden等都可以解决边距合并的问题,这样父级元素就不会跟着动了,基本原理要学好啊